H5 拖拽,直接指对象设置可拖拽

Posted 2020-10-03 Lzpong

页面上, 弹个小窗体, 又不想 加载一堆js, 有想简单的就能让他可以拖动?   嗯,下面有这样一个函数,调用下就好了!

1. 先来说说 H5的 拖拽

在 html5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

 

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

 

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

 

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

 

代码解释：

• 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
• 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
• 被拖数据是被拖元素的 id ("drag1")
• 把被拖元素追加到放置元素（目标元素）中

简述函数:

      被拖拽元素上触发的事件：

• 　　1.ondragstart - 用户开始拖动元素时触发
• 　　2.ondrag - 元素正在拖动时触发
• 　　3.ondragend - 用户完成元素拖动后触发

　   目标元素上触发的事件：

• 　　1.ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
• 　　2.ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
• 　　3.ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
• 　　4.ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

      另外，需要的知识点就是event对象中的preventDefault()。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。
不过，保存在dataTransfer对象中的数据只能在ondrop事件处理程序中读取。

      另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。
此时需要用用document的ondragover事件把它直接干掉。

 2. 干货,一个函数解决问题

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(允许拖动的对象,拖动要移动的对象)

 搞定。