Seret dan Lepas Pohon Bersarang React.js

Saya memiliki pohon bersarang:

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

Berikut fungsinya (ini Flux, namun menurut saya tidak penting):

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

Di onDragEnter saya menghapus dragItem dari tempat sebelumnya dan menambahkan ke tempat sekarang. Semuanya berfungsi dengan baik saat saya memindahkan item di TreeNode yang sama. Saat saya melompat ke yang lain, onDragEnter (mengubah tempat item) masih berfungsi dengan baik, tetapi onDragEnd tidak menyala. Bisakah seseorang memberi saya petunjuk? :)


reactjs javascript drag-and-drop nested-lists
person vassilsha    schedule 15.02.2015    source sumber
comment
Saya menyadari, mengapa tidak menyala (dragEnd diikat ke elemen yang telah dihapus dan yang baru tidak memilikinya). Namun, mengapa penjilidan manual saya tidak berfungsi? :) Saya telah memeriksa this.props.parent.refs[DraggingRef].getDOMNode() dan sepertinya menunjuk ke elemen yang tepat...   -  person vassilsha    schedule 16.02.2015

Jawaban (1)


arrow_upward
1
arrow_downward

Oke guys, ini solusi yang lebih mudah:

_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 HARUS ada di sana agar onDrop dapat diaktifkan :)

person vassilsha    schedule 16.02.2015