简单实现元素可拖动的效果

z2xy 发布于2019-08-20 18:02 / 563人阅读

摘要：简单实现一个可拖动元素的效果，参考了了张鑫旭大神的代码。需求说明创建一个函数，接收两个参数，和，即点击后触发拖动效果的元素和要拖动的元素。当在上点击鼠标时会触发拖动的效果，松开鼠标后不再拖动。

简单实现一个可拖动元素的效果，参考了了张鑫旭大神的代码。

需求说明

创建一个函数，接收两个参数，triggerElement和targetElement，即点击后触发拖动效果的元素和要拖动的元素。当在triggerElement上点击鼠标时会触发拖动targetElement的效果，松开鼠标后不再拖动。

实现思路

给触发拖动的元素添加点击事件监听函数；

点击触发元素之后，在点击事件处理函数内部，为document添加鼠标移动(mousemove)的事件监听；

还需要在松开鼠标后，停止拖动，所以需要为document添加鼠标松开(mouseup)的事件监听；

代码

先给触发元素添加点击事件

    function startDrag(triggerElement, targetElement) {
      triggerElement.addEventListener("mousedown", function (event) {
        var originMouseX, originMouseY, moveX, moveY;

        originMouseX = event.clientX
        originMouseY = event.clientY
        document.addEventListener("mousemove", mouseMove, false)
        document.addEventListener("mouseup", mouseUp, false)

        function mouseMove(event) {
          moveX = event.clientX - originMouseX
          moveY = event.clientY - originMouseY
          originMouseX = event.clientX
          originMouseY = event.clientY
          targetElement.style.left = +moveX + +targetElement.offsetLeft + "px"
          targetElement.style.top = +moveY + +targetElement.offsetTop + "px"
          // 防止选取文字
          event.preventDefault();
          triggerElement.onselectstart = function () {
            return false;
          }
        } // mouseMove end

        function mouseUp(event) {
          document.removeEventListener("mousemove", mouseMove, false)
          document.removeEventListener("mouseup", mouseUp, false)
        } // mouseUp end
      }, false)
    }

使用

和张鑫旭大神的一样，只需要调用这个函数，将两个元素:触发拖动的元素和被拖动的元素，传进函数就可以了
PS:被拖动的元素需要设置绝对定位：position: absolute;

云服务器 GPU云服务器 dom元素可拖动可拖动表格拖动元素元素拖动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84031.html

使用 Drag and Drop 给Web应用提升交互体验

摘要：注意点在鼠标操作拖放期间，有一些事件可能触发多次，比如和。可拖拽元素，建议使用，设定可拖拽元素的鼠标游标，提升交互。在中使用拖拽中使用可以直接绑定到组件上。什么是 Drag and Drop （拖放）？简单来说，HTML5 提供了 Drag and Drop API，允许用户用鼠标选中一个可拖动元素，移动鼠标拖放到一个可放置到元素的过程。我相信每个人都或多或少接触过拖放，比如浏览...

legendmohe 2019-08-02 12:03 评论0 收藏0
Drag&Drop 拖放API简介以及在React中的实践

摘要：如其他属性及方法，详细可以查看跨终端能力跨终端能力是最大的特点。在指定区域的事件中，通过对象的属性，即可获得文件列表信息，如打印文件名在中实践在项目中使用，依然遵循数据驱动的原则，即事件数据更新。同时，在事件中执行判断。最近有个需求，需要产品导航栏支持拖放。虽然开源社区已有不少成熟的拖放库，但考虑到代码可控性和可定制性，还是自己写吧。选型关于选型，前端实现拖放功能，无外乎几种： 1、通...

lcodecorex 2019-05-23 17:27 评论0 收藏0
原生JS快速实现拖放（drag and drop）效果

摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

objc94 2019-08-02 15:22 评论0 收藏0
原生JS快速实现拖放（drag and drop）效果

摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

arashicage 2019-08-30 11:14 评论0 收藏0
原生JS快速实现拖放（drag and drop）效果

摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

jzzlee 2019-08-23 18:15 评论0 收藏0