实现div鼠标拖动效果

最新推荐文章于 2025-04-24 09:25:15 发布

xiazeqiang2018

最新推荐文章于 2025-04-24 09:25:15 发布

阅读量3.3k

点赞数

分类专栏：个人技术类

本文链接：https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81408623

版权

个人技术类专栏收录该内容

23 篇文章

订阅专栏

本文介绍在Vue中利用mousedown、mousemove、mouseup事件实现div元素的拖动功能。讲解了offsetLeft和style.left的区别，并提供了实现拖动的步骤：设置事件监听、更新拖拽状态及元素位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本例是在vue中实现的拖动功能，但是基本思想是一样的。主要是根据mousedown、mousemove、mouseup三个事件，结合元素的offsetLeft和el.style.left属性实现。
顺便记录一下两者的区别：
1. offsetLeft总的来说是获取当前元素距父元素左侧的值，具体分两种情况：
如果当前元素仍在普通流中（即position值为static或者relative），offsetLeft获取的是当前元素距流中父元素左侧的值，包括父元素的padding-left、margin-left、border-left，注：IE下有误差；
如果当前元素已从普通流中删除，使用了绝对定位absolute或固定定位fixed，offsetLeft获取的是当前元素距已定位的父元素左侧的值，即left+当前元素的margin-left。
2. style.left的元素需要自身设置了定位才能生效，获取或设置当前元素相对于已定位的父元素左侧的距离，仅仅是内联样式中的left值；但当元素的position为relative时，style.left指的是相对于该元素在流中原有位置左上角的左边距离。
3. offsetLeft和style.left的区别
style.left返回值为字符串，如”21px”，offsetLeft返回值为数值，如28；
style.left可获取也可设置，offsetLeft只可读；
style.left需事先在内联样式中定义，否则在js中获取到的值为空。

实现方式：
1：给元素设置mousedown、mousemove、mouseup三个事件。

<div class='edit' style="position:fixed;left: 25%;top:20%;" v-if="show" ref="box" >
    <div class="edit_header"  @mousedown="down" @mousemove="move" @mouseup="up"><h4>新增</h4></div>
    </div>

2：设置是否可拖拽状态码，首先点击时变成可拖拽，并记录鼠标位置和元素位置的属性。鼠标移动时通过当前事件里鼠标clientX减去点击时鼠标的clientX获取鼠标移动的距离，然后将元素位置属性设置为（点击时的元素位置+移动的鼠标距离）。最后mouseup时状态码设置为不可拖拽。

  isDragable:false,//是否可以拖动
  currentX:'', //点击时鼠标距左边的距离
  currentY:'',//点击时鼠标距顶边的距离
  objX:'', //点击时元素距左边的距离
  objY:'' //点击时元素距顶边的距离

 down(e){
        var dragObj=this.$refs.box;
        this.isDragable=true;
        this.currentX=e.clientX;
        this.currentY=e.clientY;
        this.objX=dragObj.offsetLeft;
        this.objY=dragObj.offsetTop;
      },
      move(e){
        var dragObj=this.$refs.box;
        if(this.isDragable){
          var moveX=e.clientX-this.currentX;
          var moveY=e.clientY-this.currentY;
          dragObj.style.left=(this.objX+moveX)+'px';
          dragObj.style.top=(this.objY+moveY)+'px';
        }

      },
      up(){
        this.isDragable=false;
      }