共计 2005 个字符，预计需要花费 6 分钟才能阅读完成。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 教程 www.jc2182.com</title>
<style>
#div1 {
width: 250px;
height: 300px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
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));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="/images/f3.jpg" draggable="true" ondragstart="drag(event)" width="250" height="300">
</body>
</html> 示例说明：1，要使元素可拖动，请将该 draggable 属性设置为 true：
<img draggable=”true”>
2，要拖动什么，ondragstart 和 setData()：指定拖动元素时应该发生的事情。在上面的示例中，该 ondragstart 属性调用一个函数 drag(event)，该函数指定要拖动的数据。dataTransfer.setData() 方法设置数据类型和拖动数据的值：
function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);
}3，在这种情况下，数据类型是“text”，值是可拖动元素的 id（“drag1”）。3，要拖到哪里 – ondragover：ondragover 事件指定可以删除拖动数据的位置。默认情况下，不能在其他元素中删除数据 / 元素。要允许删除，我们必须阻止元素的默认处理。这是通过调用 event.preventDefault() ondragover 事件的方法来完成的：
event.preventDefault()
4，删除拖动的数据时，会发生丢弃事件。在上面的例子中，ondrop 属性调用一个函数 drop(event)：
function drop(ev) {ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}来回拖放的示例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 教程（www.jc2182.com）</title>
<style>
#div1, #div2 {
float: left;
width: 250px;
height: 300px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
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));
}
</script>
</head>
<body>
<h2> 拖放 </h2>
<p> 在两个 div 元素中来回拖放这张图片 </p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/images/f2.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="250" height="300">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>更多高级的教程
正文完