拖放 事件 产生事件的元素 描述 dragstart 被拖放的元素 开始拖放操作 drag 被拖放的元素 拖放过程中 dragenter 拖放过程中鼠标经过的元素 被拖放的元素开始进入本元素的范围之内 dragover 拖放过程中鼠标经过的元素 被拖放的元素正在本元素范围内移动 dragleave 拖放过程中鼠标经过的元素 被拖放的元素离开本元素的范围 drop 拖放的目标元素 其他元素被拖放到了本元素中 dragend 拖放的对象元素 拖放操作结束 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<script>
function allowDrop(ev) {
//不执行默认处理(拒绝拖放)
ev.preventDefault();
}
function drag(ev) {
//setDate(类型，数据)
//数据存入dataTransfer对象
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
//不执行默认处理(拒绝拖放)
ev.preventDefault();
//getData(}获取数据赋值date
var data=ev.dataTransfer.getData("Text");
//appendChild()方法拖动子节点
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> 示例图： 分享知识，分享快乐！希望中国站在编程之巅！ ----融水公子 公众微信号：rsgz520 360图书馆馆号：rsgz002.360doc.com
|
