在HTML5中元素自带拖拽属性。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
示例
<body>
<div id="dragA" style="width:100px;height: 100px;background-color: blue;border: 1px black solid" draggable="true" ondragstart="drag(event)"></div>
<div id="canvas" style="width: 1000px;height: 500px;border: 1px black solid" ondragover="dragOver(event)" ondrop="drop(event)"></div>
</body>
<script>
function drag(ev) {
ev.dataTransfer.setData("id",ev.target.id);
}
function dragOver(ev) {
ev.preventDefault();
}
function drop(ev) {
console.log(ev.target.id);
var canvas = document.getElementById(ev.target.id);
var node = document.getElementById(ev.dataTransfer.getData("id"));
var newNode = node.cloneNode();
newNode.style.position = "absolute";
newNode.id = "";
newNode.draggable = false;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
newNode.style.top = (ev.clientY + scrollY -50).toString() + "px";
newNode.style.left = (ev.clientX + scrollX -50).toString() + "px";
canvas.appendChild(newNode);
}
</script>
用法
- 为要拖拽的元素添加 draggable = “true” , 允许拖拽
- 为元素的 ondragstart 绑定函数，该函数会在拖放开始时触发，此时保存拖拽元素的id
- 为放置区域的 ondragover 绑定函数，该函数会在拖拽经过时触发，event.preventDefault() 阻止默认事件，即拖拽经过时不现实禁止放置图标。
- 为放在区域 ondrop 绑定函数，该函数会在拖拽松开鼠标时触发，此时触发所需要的事件
注意
Firefox下必须设置数据才可以拖拽，否则draggable = “true”无效。在拖拽开始函数中设置数据时 event.dataTransfer.setData(“id”,ev.target.id);
3205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
