标签：offset 部分 解决 dev eof position tran 动作 目标
页面上, 弹个小窗体, 又不想 加载一堆js, 有想简单的就能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了!
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
代码解释：
被拖拽元素上触发的事件：
目标元素上触发的事件：
另外，需要的知识点就是event对象中的preventDefault()。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。
不过，保存在dataTransfer对象中的数据只能在ondrop事件处理程序中读取。
另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。
此时需要用用document的ondragover事件把它直接干掉。
function setDragable(drg,mov){ let drgObj=drg; let moveObj=mov; function G(o){return document.querySelector(o)} //获取元素的纵坐标,距离文档顶部的高度 function getTop(e) { var offset = e.offsetTop; if (e.offsetParent != null) offset += getTop(e.offsetParent); return offset; } //获取元素的横坐标,距离文档左边的宽度 function getLeft(e) { var offset = e.offsetLeft; if (e.offsetParent != null) offset += getLeft(e.offsetParent); return offset; } //拖放开始 function dragstart(e){ let off={x:e.x-getLeft(moveObj),y:e.y-getTop(moveObj)}; moveObj.dragOff=off; } //拖放结束 function dragend(e){ let off=moveObj.dragOff; moveObj.style.top=e.y-off.y+"px"; moveObj.style.left=e.x-off.x+"px"; } if(typeof drg !="object") drgObj=G(drg); if(typeof mov != "object") moveObj=G(mov); drgObj.draggable = true; drgObj.style.cursor= "move"; moveObj.style.position = "absolute"; //监听拖动事件 drgObj.addEventListener("dragstart",dragstart,true); drgObj.addEventListener("dragend",dragend,true); }
怎么用:
setDragable(允许拖动的对象,拖动要移动的对象)
搞定。
标签：offset 部分 解决 dev eof position tran 动作 目标
原文地址：http://www.cnblogs.com/lzpong/p/7410939.html
