Перетаскивание вложенного дерева React.js

У меня есть вложенное дерево:

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 не срабатывает. Может ли кто-нибудь дать мне подсказку? :)


reactjs javascript drag-and-drop nested-lists
person vassilsha    schedule 15.02.2015    source источник
comment
Я понимаю, почему он не срабатывает (dragEnd был привязан к элементу, который был удален, а у нового его нет). Однако почему моя ручная привязка не работает? :) Я проверил this.props.parent.refs[DraggingRef].getDOMNode() и, кажется, указывает на правильный элемент...   -  person vassilsha    schedule 16.02.2015

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, ребята, вот более простое решение:

_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 был запущен :)

person vassilsha    schedule 16.02.2015