执行拖放与多个列表的反应

Question

我想实现拖动&拖放与多个列表的反应，但我似乎无法得到它的工作！

我的颜色对象在放置后发生更改，但不会将该项目放置在确切的位置。同时，draggig占位符在ul有效的dropzone之外也可见。

var colors = { 
    "a": ["Red", "Green", "Blue"], 
    "b": ["Yellow", "Black", "White", "Orange"] 
}; 
var placeholder = document.createElement("li"); 
placeholder.className = "placeholder"; 
var List = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: this.props.data 
     }; 
    }, 
    dragStart: function(key, index, e) { 
     this.dragged = e.currentTarget; 
     this.contentToBeDragged_src = e.currentTarget.parentNode; 
     e.dataTransfer.effectAllowed = 'move'; 
     // Firefox requires dataTransfer data to be set 
     e.dataTransfer.setData("text/html", e.currentTarget); 
    }, 
    dragEnd: function(key, index, e) { 
     console.log(key + ' ' + index); 
     this.dragged.style.display = "block"; 
     //this.dragged.parentNode.removeChild(placeholder); 
     // Update data 
     var data = this.state.data; 
     var from = Number(this.dragged.dataset.id); 
     var to = Number(this.over.dataset.id); 
     data[index].splice(0, data[index].splice(from, 1)[0]); 
     this.setState({ 
      data: data 
     }); 
    }, 
    dragOver: function(e) { 
     e.preventDefault(); 
     //this.dragged.style.display = "none"; 
     if (e.target.className == "placeholder") return; 
     this.over = e.target; 
     // Inside the dragOver method 
     var relY = e.clientY - this.over.offsetTop; 
     var height = this.over.offsetHeight/2; 
     var parent = e.target.parentNode; 
     if (relY > height) { 
      this.nodePlacement = "after"; 
      parent.insertBefore(placeholder, e.target.nextElementSibling); 
     } else if (relY < height) { 
      this.nodePlacement = "before" 
      parent.insertBefore(placeholder, e.target); 
     } 
    }, 
    render: function() { 
     var context = this; 
     var lists = Object.keys(context.state.data).map(function(key) { 
      return <ul onDragOver = { 
        context.dragOver 
       } > { 
        context.state.data[key].map(function(item, i) { 
         return (< 
          li data - id = { 
           i 
          } 
          key = { 
           i 
          } 
          draggable = "true" 
          onDragEnd = { 
           (evt) => context.dragEnd(key, i, evt) 
          } 
          onDragStart = { 
           (evt) => context.dragStart(key, i, evt) 
          } > 
          { 
           item 
          } < 
          /li> 
         ) 
        }, context) 
       } < 
       /ul> 
     }); 

     return <div > { 
      lists 
     } < /div> 

    } 
}); 

ReactDOM.render(< 
    List data = { 
     colors 
    } 
    />, document.getElementById('app') 
); 

这里是一个jsfiddle与我的尝试。 jsfiddle

任何帮助将不胜感激，谢谢！

Answer 1

至于下降的一部分，问题在dragEnd()你写：

data[index].splice(0, data[index].splice(from, 1)[0]); 

第一个问题是，你使用data[index]时，你应该使用data[key]（你不需要索引）。第二个问题是你的移动操作，这可能不符合你的期望。以下是该行的外观：

data[key].splice(to, 0, data[key].splice(from, 1)[0]);