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