javascript - React.js 嵌套树拖放

Question

我有一个嵌套树:

var TreeNodes = React.createClass({
...
render : function() {
     var output = this.props.item.children.map(function(node, index) {                  
           return (<li><TreeNodes item = {node}/></li>);
     })

     return (
         <div onDragEnter={this._onDragEnter} 
              onDragStart = {this._onDragStart}
              onDragEnd = {this._onDragEnd}>
                 {item.title}
         </div>
         {output}
     )
})

以下是函数(这是 Flux，不过我认为这并不重要):

_onDragStart : function(e) {
    var draggingItem = {...};
    this.props.context.executeAction(treeActions._onDragStart, draggingItem);
},
_onDragEnter: function(e){
    var dropCandidate = {...};
    this.props.context.executeAction(treeActions.checkDropPossible, dropCandidate);
    var DraggingRef = this.props.dragging.type + this.props.dragging.id;
    var self = this;
    this.props.parent.refs[DraggingRef].getDOMNode().addEventListener('dragend', self._onDragEnd);
},   
_onDragEnd : function(e) {
    var dropPlace= {...};
    this.props.context.executeAction(treeActions._onDrop, dropPlace);
    if (this.isMounted()) {
        this.getDOMNode().removeEventListener('dragend', this.dragEnd, false);
    } 
}, 

在 onDragEnter 中，我将 DraggingItem 从之前的位置删除并添加到当前位置。当我在同一个 TreeNode 中移动项目时，一切正常。当我跳到另一个时，onDragEnter(更改项目的位置)仍然可以正常工作，但 onDragEnd 不会触发。有人可以给我提示吗？ :)

Answer 1

好吧，伙计们，这里有更简单的解决方案:

_onDragStart : function(e) {
    e.stopPropagation();
    var draggingItem = {
        f_index : this.props.item.f_index,
        type : this.props.item.type, 
        id : this.props.item.id, 
        parentID: this.props.parentID, 
        position: this.props.position,
        ref: this.props.ref,
        parentRef : this.props.parentRef};
    this.props.context.executeAction(treeActions._onDragStart, draggingItem);

},
_onDragEnter: function(e){
    e.preventDefault(); // Necessary. Allows us to drop.
    e.stopPropagation();
    window.event.returnValue=false;         
    if (this.props.dragging.type !== this.props.item.type || this.props.dragging.id !== this.props.item.id)  {
        var dropCandidate = {id : this.props.item.id, type: this.props.item.type, parent: this.props.parentID, position : this.props.position, ref : this.props.ref, f_index : this.props.item.f_index};
        var self = this;
        this.props.context.executeAction(treeActions.checkDropPossible, dropCandidate);
    }
}, 
_onDragOver: function(e){
    e.preventDefault(); // Necessary. Allows us to drop.
    e.stopPropagation();
    window.event.returnValue=false;
},
_onDrop : function(e) {
    e.preventDefault();
    e.stopPropagation()
    var dropPlace= {id : this.props.item.id, type: this.props.item.type, position : this.props.position, parentID: this.props.parentID, ref : this.props.ref, f_index : this.props.item.f_index};
    this.props.context.executeAction(treeActions._onDrop, dropPlace);
},

onDragOver 必须存在才能触发 onDrop :)