我有这个简单的拖放脚本。它基本上允许我将项目从窗格拖到另一个窗格。
当我完成删除时出现错误
TypeError: Argument 1 of Node.appendChild is not an object.
这很奇怪,因为我很确定我的论点是一个对象。那么我没有到达那里?
以下是脚本的外观
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul,
ol {
display: block;
width: 200px;
height: 300px;
float: left;
margin: 20px;
}
ul {
background: #927aff;
}
ol {
background: #dda3f2;
}
li {
list-style-type: none;
padding: 6px 10px;
color: #fff;
display: block;
border-bottom: 1px solid #fff;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="music">
<li draggable="true">pop</li>
<li draggable="true">hiphop</li>
<li draggable="true">jazz</li>
<li draggable="true">country</li>
</ul>
<ol id="math">
<li draggable="true">number</li>
<li draggable="true">integeter</li>
<li draggable="true">floating point</li>
</ol>
<script>
var li = document.querySelectorAll('ul li');
Array.prototype.forEach.call(li, function(item) {
item.ondragstart = function(e) {
e.dataTransfer.setData("secret", this);
}
});
document.getElementById('math').ondrop = function(e) {
e.preventDefault();
console.log('this', this);
var dom = e.dataTransfer.getData("secret");
console.log(dom);
this.appendChild(dom);
};
document.getElementById('math').ondragover = function(e) {
e.preventDefault();
}
</script>
</body>
</html>
&#13;
答案 0 :(得分:2)
好像作为dataTransfer
一部分的数据被设置为字符串。
因此,您拥有的dom
变量是一个字符串,因此它不是可以作为子项附加的HTML节点
(如果在例外情况下添加断点,则可以看到这一点)
以下是一个可以作为踩点的工作示例(不使用dataTransfer):https://jsfiddle.net/maniator/aopmgvso/
var li = document.querySelectorAll('li');
var currentDragging;
Array.prototype.forEach.call(li, function(item) {
item.ondragstart = function(e) {
currentDragging = this;
}
});
document.getElementById('math').ondrop = function(e) {
e.preventDefault();
this.appendChild(currentDragging);
};
document.getElementById('music').ondrop = function(e) {
e.preventDefault();
e.currentTarget.appendChild(currentDragging);
};
document.getElementById('math').ondragover = function(e) {
e.preventDefault();
}
document.getElementById('music').ondragover = function(e) {
e.preventDefault();
}
答案 1 :(得分:1)
dataTransfer真正意味着字符串。你可以做的是设置一个全局数组,并通过dataTransfer将索引传递给你的DOM引用。
像这样:
var ref = [];
Array.prototype.forEach.call(li, function(item) {
item.ondragstart = function(e) {
var index = ref.push(this) - 1; //as push() returns length, not index, remove 1.
e.dataTransfer.setData("secret", index);
}
});
document.getElementById('math').ondrop = function(e) {
e.preventDefault()
console.log('this', this);
var index = e.dataTransfer.getData("secret");
dom = ref[index];
ref = ref.splice(index, 1); //remove element at that index
console.log(dom.innerHTML);
this.appendChild(dom);
};
或者使用您的代码查看示例小提琴: