正文
Html5-draggable元素拖动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Html5元素拖动
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
注意:Safari 5.1.2不支持拖动.
第一步：将需要拖动的元素Html标签设置为draggable="true"
<img id="dragImg" draggable="true" src="img/test1.png" width="200" height="111" />
第二步：定义拖动函数
//拖动开始
function dragStar(ev) {
//获取拖动元素值得类型与id
ev.dataTransfer.setData("Text", ev.target.id);
} //拖动中
function draging(ev) {
//去除浏览器对数据的默认处理
ev.preventDefault();
} //拖动结束（放置）
function dragEnd(ev) {
//去除浏览器对数据的默认处理
ev.preventDefault();
//获取被拖动（需要放置）的元素的id
var data = ev.dataTransfer.getData("Text");
//将data放置到容器中
ev.target.appendChild(document.getElementById(data));
}
第三步，为Html中需要拖动的元素，和拖动后放置的容器的 拖动事件绑定拖动上述定义函数
<div id="div1" ondrop="dragEnd(event)" ondragover="draging(event)">
<img id="dragImg" draggable="true" ondragstart="dragStar(event)" src="img/test1.png" width="200" height="111" />
</div>
<div id="div2" ondrop="dragEnd(event)" ondragover="draging(event)"></div>
ok，功能实现；
测试全代码：
css
#div1,#div2{ float:left; margin-right:10px; width:300px; height:120px; line-height:120px; text-align:center; border:1px solid #808080; }
img{ vertical-align:middle; }
Html
<div id="div1" ondrop="dragEnd(event)" ondragover="draging(event)">
<img id="dragImg" draggable="true" ondragstart="dragStar(event)" src="img/test1.png" width="200" height="111" />
</div>
<div id="div2" ondrop="dragEnd(event)" ondragover="draging(event)"></div>
JavaScript
//拖动开始
function dragStar(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
} //拖动中
function draging(ev) {
ev.preventDefault();
} //拖动结束（放置）
function dragEnd(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
小知识：
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
