Javascript 实施拖放；使用react删除多个列表

我正在尝试使用react实现多个列表的拖放，但我似乎无法让它工作

放置后，我的颜色对象会发生变化，但它不会将项目放置在准确的位置。此外，在拖动时，占位符也会在ul valid 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')
);

var颜色={
“a”：[“红”、“绿”、“蓝”]，
“b”：[“黄色”、“黑色”、“白色”、“橙色”]
};
var占位符=document.createElement（“li”）；
placeholder.className=“placeholder”；
var List=React.createClass({
getInitialState:函数（）{
返回{
数据：this.props.data
};
},
dragStart:函数（键、索引、e）{
this.drad=e.currentTarget；
this.contentToBeDragged_src=e.currentTarget.parentNode；
e、 dataTransfer.effectAllowed='move'；
//Firefox需要设置数据传输数据
e、 setData（“text/html”，例如currentTarget）；
},
dragEnd：函数（键、索引、e）{
控制台日志（键+“”+索引）；
this.dradded.style.display=“block”；
//this.dragged.parentNode.removeChild（占位符）；
//更新数据
var data=this.state.data；
var from=Number（this.draugd.dataset.id）；
var to=Number（this.over.dataset.id）；
数据[index]。拼接（0，数据[index]。拼接（from，1）[0]）；
这是我的国家({
数据：数据
});
},
德拉戈弗：功能（e）{
e、 预防默认值（）；
//this.dradded.style.display=“无”；
if（e.target.className==“占位符”）返回；
这个。超过=e。目标；
//在dragOver方法内部
var Relay=e.clientY—this.over.offsetTop；
var height=this.over.offsetHeight/2；
var parent=e.target.parentNode；
如果（依赖>高度）{
this.nodePlacement=“after”；
parent.insertBefore（占位符，例如target.nextElementSibling）；
}否则如果（依赖<高度）{
this.nodePlacement=“before”
parent.insertBefore（占位符，例如target）；
}
},
render:function（）{
var context=this；
var list=Object.keys（context.state.data）.map（function（key）{
返回
 {
context.state.data[key].map（函数（项，i）{
报税表（<
li数据-id={
我
}
键={
我
}
draggable=“true”
onDragEnd={
（evt）=>context.dragEnd（key，i，evt）
}
onDragStart={
（evt）=>context.dragStart（键，i，evt）
} >
{
项目
} <
/李>
)
}，上下文）
} <
/ul>
});
返回{
列表
}