React.js 嵌套树拖放答案

【问题标题】：React.js nested Tree Drag and DropReact.js 嵌套树拖放
【发布时间】：2015-02-15 23:08:37
【问题描述】：

我有一棵嵌套树：

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 不会触发。有人可以给我一个提示吗？ :)

【问题讨论】：

我确实知道，为什么它不会触发（dragEnd 绑定到已删除的元素，而新元素没有它）。但是，为什么我的手动绑定不起作用？ :) 我检查了 this.props.parent.refs[DraggingRef].getDOMNode() 它似乎指向正确的元素...

标签： javascript drag-and-drop reactjs nested-lists

【解决方案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 :)

【讨论】：