複数のリストの反応でドラッグ＆ドロップを実装する

Question

ドラッグを実装しようとしています&複数のリストの反応でドロップしましたが、動作しないようです！

私のカラーオブジェクトはドロップ後に変化しますが、アイテムを正確な位置に配置しません。また、draggigのプレースホルダーもul有効なドロップゾーンの外側に表示されます。

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

ご協力いただきありがとうございます。ありがとうございます！滴下部分については

Answer 1

、問題はあなたが書いたdragEnd()にあります。

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

最初の問題は、あなたがdata[key]を使用しなければならないとき、あなたは（あなたがインデックスを必要としない）data[index]を使用することです。 2番目の問題はあなたの移動操作であり、おそらくあなたが望むことはしません。その線は次のようになります：

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