vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；

最新推荐文章于 2023-10-12 16:57:24 发布

i_am_a_div_日积月累_

最新推荐文章于 2023-10-12 16:57:24 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： v-drag指令移动盒子 vue移动元素 vue项目点击拖拽盒子

本文链接：https://blog.csdn.net/i_am_a_div/article/details/120157010

版权

vue 专栏收录该内容

109 篇文章 5 订阅

订阅专栏

这篇博客详细介绍了如何在Vue项目中实现一个拖拽功能，允许用户点击并拖动一个固定定位的盒子。通过在模板中添加v-drag指令，并在JavaScript中处理鼠标按下、移动和释放事件，实现了盒子的移动效果。代码示例展示了如何计算鼠标点击位置与盒子位置的关系，以及在鼠标移动时更新盒子的位置。

摘要由CSDN通过智能技术生成

vue项目：点击拖拽盒子；移动盒子；

在这里插入图片描述

代码可直接复制：（注意需要在移动的盒子上添加 v-指令注意采用固定定位）

<template>
  <div class="far_box">
    <div>{{ msg }}</div>
	
	<!-- v-drag指令 -->
    <div v-drag class="move_box">目标盒子</div>
  </div>

</template>

<script>
export default {
  // 指令
  directives: {
    drag (el) {
      // console.log('el', el)
      // 鼠标移动到目标盒子上--监听鼠标按下事件
      el.onmousedown = function (e) {
        // console.log('e1', e)
        // 计算出此时点击目标盒子 相对于自己的左上角距离（目的是为了下方位移时候 赋值减去相应的自己左上角位置 保证盒子定位点还是自己点击的点 而不是左上角点）
        // vue项目对于原生的dom操作 其实就是在方法内 也就是js内 使用原生的方法对元素进行dom操作 和普通的js操作一样
        var disx = e.offsetX
        var disy = e.offsetY

        document.onmousemove = function (e2) {
          var move_box = document.getElementsByClassName('move_box')[0]
          move_box.style.position = 'fixed'
          move_box.style.left = e2.clientX - disx + 'px'
          move_box.style.top = e2.clientY - disy + 'px'
          // console.log('最后的定位：', e2.clientX - disx, e2.clientY - disy, e2)
        }
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  },
  data () {
    return {
      msg: '其他盒子元素'
    }
  }

}
</script>
<style lang="less" scope>
.far_box {
  .move_box {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #1fff;
    width: 100px;
    height: 50px;
    line-height: 50px;
  }
  .move_box:active {
    background-color: #1f1f;
  }
}
</style>