我正在尝试按照此处的指南为我的网站进行拖放操作,但我在捕捉drop
事件时遇到了问题。
我想要做的几乎就是允许用户将一个元素拖到底部的 div 中,一旦他们真正将它放入,它就会将它添加到该 div 中。
这是我的小提琴。如您所见,handleDrop
我创建的函数永远不会被调用。
我还尝试在单个元素上添加 eventListener “drop”,而不是它们将被放入的元素,但这似乎也不起作用。我已经在小提琴中对此进行了评论。有什么帮助吗?
这是Fiddle和另一种方法。
HTML
<img id="1" src="/" draggable="true" ondragstart="drag(event)" alt="Image 1"/>
<img id="2" src="/" draggable="true" ondragstart="drag(event)" alt="Image 2"/>
<img id="3" src="/" draggable="true" ondragstart="drag(event)" alt="Image 3"/>
<img id="4" src="/" draggable="true" ondragstart="drag(event)" alt="Image 4"/>
<img id="5" src="/" draggable="true" ondragstart="drag(event)" alt="Image 5"/>
<div id="playlist" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
CSS
#playlist {
position: absolute;
top: 150px;
left: 0;
width: 960px;
min-height:160px;
background-color:#e5e5e5;
}
#playlist img {
margin: 5px;
}
img {
width: 150px;
height: 90px;
margin: 5px;
}
JS
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}