<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<script>
function allowDrop(ev) {
//不執(zhí)行默認(rèn)處理(拒絕拖放)
ev.preventDefault();
}
function drag(ev) {
//setDate(類型，數(shù)據(jù))
//數(shù)據(jù)存入dataTransfer對(duì)象
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
//不執(zhí)行默認(rèn)處理(拒絕拖放)
ev.preventDefault();
//getData(}獲取數(shù)據(jù)賦值date
var data=ev.dataTransfer.getData("Text");
//appendChild()方法拖動(dòng)子節(jié)點(diǎn)
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#tuo{
background: #e54d26;
width:540px;
height:320px;
}
#cun{
width:540px;
height:320px;
border: 2px solid #d2d2d2;
box-shadow: 1px 4px 8px #646464;
}
</style>
</head>
<body>
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img src="u=1266410937,482183497&fm=27&gp=0.jpg" id="tuo" dragable="true" ondragstart="drag(event)" width="500" height="280">
</body>
</html>
示例圖：分享知識(shí)，分享快樂！希望中國(guó)站在編程之巔！----融水公子
公眾微信號(hào)：rsgz520
360圖書館館號(hào)：rsgz002.360doc.com
