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

05-25 23:51