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

Question

我正在嘗試按照此處的指南進行網站的拖放工作，但是遇到捕獲drop事件的問題。

我幾乎想做的是允許用戶將元素拖到底部的d​​iv中，一旦將其實際拖放到該元素中，它將添加到該div中。

這是我的小提琴 。 如您所見，我創建的handleDrop函數永遠不會被調用。

我還嘗試將eventListener“ drop”添加到各個元素上，而不是將它們放入其中的元素，但這似乎也不起作用。 我已經在小提琴中對此進行了評論。 有什么幫助嗎？

Answer 1

這是小提琴 ，還有另一種方法。

的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));
}