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} 
    ) 
}) 

Вот функции (это поток, однако, я думаю, что это не важно):

_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 уволят :)