Question

我正在尝试按照指南here为我的网站拖放工作，但我遇到了捕捉drop事件的问题。

我想要做的就是允许用户将一个元素拖到底部的div中，一旦它们实际放入它，它就会将它添加到该div中。

这是我的fiddle。如您所见，我创建的handleDrop函数永远不会被调用。

我还尝试在各个元素上添加eventListener“drop”而不是它们将被放入的元素，但这似乎也不起作用。我在小提琴中评论过这个。有什么帮助吗？

Answer 1

这是一个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));
}

如何使用HTML5将元素拖放到新的div中？

1 个答案: