<!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>