ΠΠ·Π²ΠΈΠ½ΠΈΡΠ΅, ΡΡΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΎ ΡΠΊΠΎΡΠ΅Π΅ ΠΊΠ°ΠΊ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΡΠΉ ΡΠΎΡΡΠΌ, Π½ΠΎ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈΡ, Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΎΡΠ²Π΅ΡΠ° ΠΎΡ DropTarget Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Π― Ρ ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΠΈΡ Β«ΠΊΠ°ΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉΒ», ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Π½Π° ΡΠ΅Π±Ρ.
Π― Π΄Π΅Π»Π°Ρ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ Π²ΠΎΠΏΠΈΡΡΠΈΠ΅ ΠΏΡΠΎΠΌΠ°Ρ ΠΈ Π·Π΄Π΅ΡΡ?
Π― ΠΌΠΎΠ³Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΄ΠΈΡΡ, ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΠΈ DragSource ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΠΈΠ· ΡΠΎΠ³ΠΎ, ΡΡΠΎ Ρ Π·Π°ΠΏΠΈΡΡΠ²Π°Ρ ΠΈΠ· ΡΡΠ½ΠΊΡΠΈΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ DropTarget, Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ.
import React, { Component } from 'react'
import { DropTarget, DragSource } from 'react-dnd'
import _ from 'lodash'
export const ItemTypes = {
CATEGORY: 'category-item'
}
class CategoryTreeFork extends Component {
componentWillReceiveProps = (nextProps) => {
console.log("Next cat props", nextProps)
}
render(){
var { thisCat, childCat, level, dropEvent } = this.props
const { connectDragSource, connectDropTarget, isDragging, isOver } = this.props
return connectDragSource(
<div className="category-tree-fork">
<div className={`category-list-item level-${level}`}
style={{
opacity: isDragging ? 0.5 : 1,
backgroundColor: isOver ? "red" : "silver"
}}>
{thisCat.name}
</div>
</div>
)
}
}
/* get dragged */
const sourceSpec = {
beginDrag(props){
return { category_id: props.thisCat.category_id }
}
}
const sourceCollect = (connect, monitor) => {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}
}
/* get dragged onto */
const targetSpec = {
drop(props, monitor, component) {
const item = monitor.getItem()
console.log("me or my friend?", item)
},
hover(props, monitor, component){
console.log("yo what you hoverin there for homie?")
}
}
const targetCollect = (connect, monitor) => {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
}
}
export default _.flow([
DragSource(ItemTypes.CATEGORY, sourceSpec, sourceCollect),
DropTarget(ItemTypes.CATEGORY, targetSpec, targetCollect)
])(CategoryTreeFork)
DX Π½Π΅Π²Π°ΠΆΠ½ΠΎ, ΠΏΠΎΠ½ΡΠ» ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Ρ Π·Π°Π±ΡΠ» Π²ΡΠ·Π²Π°ΡΡ connectDropTarget Π½Π° ΡΠ΅Π½Π΄Π΅ΡΠ΅. ΠΡΠΎ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅:
return connectDropTarget(connectDragSource(
<div className="category-tree-fork">
<div className={`category-list-item level-${level}`}
style={{
opacity: isDragging ? 0.5 : 1,
backgroundColor: isOver ? "red" : "silver"
}}>
{thisCat.name}
</div>
</div>
ΠΡΠΎ ΡΠ΅ΡΠΈΠ»ΠΎ ΠΌΠΎΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΉΡΠ°Ρ. Π‘Π»Π΅Π΄ΠΎΠ²Π°Π» Β«ΠΏΡΠΎΡΡΠΎΠΌΡΒ», ΡΠΎΡΡΠΈΡΡΠ΅ΠΌΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈ ΡΠ΄Π΅Π»Π°Π» Π΄Π²ΠΎΠΉΠ½ΡΠ΅ Π΄Π΅ΠΊΠΎΡΠ°ΡΠΎΡΡ, Π½ΠΎ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ» connectDropTarget
Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΏΡΠΈΡΠ΅Π΄ΡΠΈΡ
ΠΈΠ· ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΈ ΠΈΡΡΡΠΈΡ
ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ DragSource ΠΈ DropTarget Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ _.flow
, Π²ΠΎΡ ΠΊΠ°ΠΊ Π²Ρ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΠ΅:
export default
DragSource(typeA, specA, collectA)(
DropTarget(typeB, specB, collectB)(
Component));
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΏΡΠΈΡΠ΅Π΄ΡΠΈΡ ΠΈΠ· ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΈ ΠΈΡΡΡΠΈΡ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ DragSource ΠΈ DropTarget Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
_.flow
, Π²ΠΎΡ ΠΊΠ°ΠΊ Π²Ρ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΠ΅: