h5拖放问题
0
悬赏园豆：50
[已解决问题]
解决于 2018-12-12 14:01
目前是这么个情况 ： 拖动3到6拖不动 拖动4到1也拖不动；拖动3到5 3没过去 其他的倒过去了；
<body>
<ul>
<li draggable="true">1.金莲金莲我爱你</li>
<li draggable="true">2.大花桥</li>
<li draggable="true">3.过河自后</li>
<li draggable="true">4.半壶纱</li>
<li draggable="true">5.风花雪月</li>
<li draggable="true">6.可能否</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');
var ul=document.getElementsByTagName('ul')[0];
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].ondragstart=function(e) {
e.dataTransfer.setData("text",this.index);
}
lis[i].ondragover=function(e){
e.preventDefault();
}
lis[i].ondrop=function(e){
console.log(e.dataTransfer.getData("text"));
var tuo=lis[e.dataTransfer.getData("text")];
console.log(tuo);
ul.insertBefore(tuo,this)
console.log(ul)
}
}
</script>
</body>
如果标签获取方式换了之后就可以了：
<script>
window.onload = function(){
let li = document.querySelectorAll("li"),
ul = document.querySelector("ul");
for (let i = 0; i < li.length; i++) {
li[i].ondragstart = function(e){
e.dataTransfer.setData("text",i)
console.log(li)
}
li[i].ondragover = function(){
return false;
}
li[i].ondrop = function(e){
let x = li[e.dataTransfer.getData("text")]
ul.insertBefore(x,this);
console.log(li)
}
}
}
</script>
这是为什么呢 ，我感觉是因为getElement获取的是动态的，
而queryselector获取的是静态的 才会导致这样的情况；
但是我把ul 和li都在两边输出了之后并没有区别 很疑惑 请解答下；
最佳答案
0
ele节点位置改变后重新给节点变量赋值
收获园豆：50
