<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
height: 300px;
300px;
border:1px solid #ccc;
}
</style>
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img src="http://via.placeholder.com/350x150" draggable="true" ondragstart="drag(event)" id="origin">
<!-- 要使元素是可以拖动的，必须加上draggable="true" -->
<script type="text/javascript">
function drag(event){
event.dataTransfer.setData('text',event.target.id);
}
function drop(event){
event .preventDefault();
var data = event.dataTransfer.getData('text');
console.log(event)
event.target.appendChild(document.getElementById(data));
}
function allowDrop(event){
event.preventDefault();
}
</script>
</body>
</html>
使元素可拖动
首先：要使元素可拖动，请将draggable属性设置为true：
拖动什么 - ondragstart和setData（）
然后，指定拖动元素时应该发生的事情。
在上面的示例中， ondragstart属性调用一个函数drag（event），该函数指定要拖动的数据。
dataTransfer.setData()方法设置数据类型和拖动数据的值：
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
在这种情况下，数据类型是“text”，值是可拖动元素的id（“drag1”）
哪里下降 - ondragover
ondragover事件指定可以删除拖动数据的位置。
默认情况下，不能在其他元素中删除数据/元素。 要允许删除，我们必须阻止元素的默认处理。
这是通过调用ondragover事件的event.preventDefault()方法完成的：
event .preventDefault()
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
调用preventDefault（）以防止浏览器默认处理数据（默认情况下打开为drop on link）
使用dataTransfer.getData（）方法获取拖动的数据。 此方法将返回在setData（）方法中设置为相同类型的任何数据
拖动的数据是拖动元素的id（“drag1”）
将拖动的元素追加到drop元素中