TypeError当我想拖放项目

当我想将图像拖动到另一个位置时，我得到了一个错误。类型错误:在' datattransfer '上执行'setData'失败:需要2个参数，但只有1个。在HTMLDivElement.dropLoc。ondrop我不明白这个错误。我想把列表中的一张图片拖到另一个位置。这是我的代码

<ul>
<li><img id="dragItem" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" /></li>
<li><img id="dragItem"
src="https://res.cloudinary.com/zestarla/image/upload/v1629324525/kajabi%20work/IMG_4954_wgmrmv.jpg" />
</li>
<li><img id="dragItem" 
src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi%20work/IMG_4952_auz4in.jpg" />
</li>
<li><img id="dragItem"
src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi%20work/IMG_4962_hra9xx.jpg" />
</li>
<li><img id="dragItem" 
src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi%20work/IMG_4948_xoxjgd.jpg" />
</li>
<li><img id="dragItem"
src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi%20work/IMG_4950_jktzgh.jpg" />
</li>
<li><img id="dragItem" 
src="https://res.cloudinary.com/zestarla/image/upload/v1629324539/kajabi%20work/IMG_4949_wbxi0l.jpg" />
</li>
</ul>
<div id="dropLocation">Drop here</div>
<script>
var dragItem = document.getElementById("dragItem")
var dropLoc = document.getElementById("dropLocation")
dragItem.ondragstart = function (evt) {
evt.dataTransfer.setData('key', evt.target.id);
//console.log("it dragging...")
}
dropLoc.ondragover = function (evt) {
evt.preventDefault();
//console.log("it dragover")
}
dropLoc.ondrop = function (evt) {
var dropItem = evt.dataTransfer.setData('key');
evt.preventDefault();
var myElement = document.getElementById(dropItem);
var myNewElement = document.createElement('img');
myNewElement.src = myElement.src;
dropLoc.appendChild(myNewElement);
}
</script>

你的代码有什么问题:

您将相同的id设置为多个元素(这是无效的HTML)

dragstart

您的代码修复如下(点击"运行代码片段"测试):

var dragItems = Array.from(document.getElementsByClassName("dragItem"));
var dropLoc = document.getElementById("dropLocation");
dragItems.forEach((dragItem) => {
dragItem.ondragstart = function (evt) {
evt.dataTransfer.setData("key", evt.target.id);
//console.log("it dragging...")
};
});
dropLoc.ondragover = function (evt) {
evt.preventDefault();
//console.log("it dragover")
};
dropLoc.ondrop = function (evt) {
var dropItem = evt.dataTransfer.getData("key");
evt.preventDefault();
var myElement = document.getElementById(dropItem);
var myNewElement = document.createElement("img");
myNewElement.src = myElement.src;
dropLoc.appendChild(myNewElement);
};

<ul>
<li>
<img id="img1" class="dragItem" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg"/>
</li>
<li>
<img id="img2" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324525/kajabi%20work/IMG_4954_wgmrmv.jpg"/>
</li>
<li>
<img id="img3" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi%20work/IMG_4952_auz4in.jpg"/>
</li>
<li>
<img id="img4" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi%20work/IMG_4962_hra9xx.jpg"/>
</li>
<li>
<img id="img5" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi%20work/IMG_4948_xoxjgd.jpg"/>
</li>
<li>
<img id="img6" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi%20work/IMG_4950_jktzgh.jpg"/>
</li>
<li>
<img id="img7" class="dragItem" src="https://res.cloudinary.com/zestarla/image/upload/v1629324539/kajabi%20work/IMG_4949_wbxi0l.jpg"/>
</li>
</ul>
<div id="dropLocation">Drop here</div>

使用此代码

<html>
<head>
</head>
<body>
<ul>
<li><img class="img" id="dragItem1" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" /></li>
<li><img class="img" id="dragItem2" src="https://res.cloudinary.com/zestarla/image/upload/v1629324530/kajabi%20work/IMG_4952_auz4in.jpg" /></li>
<li><img class="img" id="dragItem3" src="https://res.cloudinary.com/zestarla/image/upload/v1629324531/kajabi%20work/IMG_4962_hra9xx.jpg" /></li>
<li><img class="img" id="dragItem4" src="https://res.cloudinary.com/zestarla/image/upload/v1629324533/kajabi%20work/IMG_4948_xoxjgd.jpg" /></li>
<li><img class="img" id="dragItem5" src="https://res.cloudinary.com/zestarla/image/upload/v1629324536/kajabi%20work/IMG_4950_jktzgh.jpg" /></li>
<li><img class="img" id="dragItem6" src="https://res.cloudinary.com/zestarla/image/upload/v1629324539/kajabi%20work/IMG_4949_wbxi0l.jpg" /></li>
</ul>
<div id="dropLocation" draggable="true">Drop here</div>
<script>
var dragItem = document.querySelectorAll(".img")
var dropLoc = document.getElementById("dropLocation")
dragItem.forEach(obj=>obj.ondragstart = function (evt) {
evt.dataTransfer.setData('key', evt.target.id);
//console.log("it dragging...")
})
dropLoc.ondragover = function (evt) {
evt.preventDefault();
//console.log("it dragover")
}
dropLoc.ondrop = function (evt) {
evt.preventDefault();
var dropItem = evt.dataTransfer.getData('key');

var myElement = document.getElementById(dropItem);
var myNewElement = document.createElement('img');
myNewElement.src = myElement.src;
dropLoc.appendChild(myNewElement);
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：