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 - 在一个拖动过程中,释放鼠标键时触发此事件