拖放 事件 產(chǎn)生事件的元素 描述 dragstart 被拖放的元素 開始拖放操作 drag 被拖放的元素 拖放過程中 dragenter 拖放過程中鼠標(biāo)經(jīng)過的元素 被拖放的元素開始進(jìn)入本元素的范圍之內(nèi) dragover 拖放過程中鼠標(biāo)經(jīng)過的元素 被拖放的元素正在本元素范圍內(nèi)移動(dòng) dragleave 拖放過程中鼠標(biāo)經(jīng)過的元素 被拖放的元素離開本元素的范圍 drop 拖放的目標(biāo)元素 其他元素被拖放到了本元素中 dragend 拖放的對(duì)象元素 拖放操作結(jié)束 <!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
|
