React.js nested Tree Drag and Drop

Question

I have a nested tree:

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

Here are the functions (this is Flux, however, I think it is not important):

_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);
    } 
},

In onDragEnter I remove the draggingItem from it's previous place and add to the current one. Everything works fine while I'm moving items in the same TreeNode. When I jump to another one, onDragEnter (changing the item's place) still works fine, but onDragEnd does not fire. Can somebody give me a hint? :)

I do realize, why it does not fire (the dragEnd was binded to the element which was deleted and a new one does not have it). However, why my manual binding does not work ? :) I've checked the this.props.parent.refs[DraggingRef].getDOMNode() and it seems to point to the right element... — vassilsha
– vassilsha, Commented Feb 15, 2015 at 23:13

vassilsha · Accepted Answer · 2015-02-16 01:17:17Z

Ok guys, here the easier solution:

_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 MUST be there in order to onDrop to be fired :)

Collectives™ on Stack Overflow

React.js nested Tree Drag and Drop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related