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