html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分。拖拽是一种常见的特性,即抓取对象以后拖到另一个位置。
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
DataTransfer 对象
退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
被拖元素:
- ondragstart(开始拖拽)
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
- ondrag(拖拽中)
- ondragend(拖拽结束)
投放区:
- ondragenter(进入投放区)
- ondragleave(离开投放区)
- ondragover(拖拽到何处)
若不阻止默认事件,则无法将元素放置到投放区。 阻止默认事件e.preventDefalut();
- ondrop(投放事件) 浏览器对元素默认以链接形式打开。
阻止默认:e.preventDefalut();
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}