封装自定义指令（拖拽）——局部

最新推荐文章于 2025-02-05 09:10:48 发布

藏剑于袖

最新推荐文章于 2025-02-05 09:10:48 发布

阅读量274

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/yangpengze/article/details/123613537

版权

笔记专栏收录该内容

47 篇文章

订阅专栏

这篇文章介绍了如何使用 Vue.js 的自定义 directives 功能实现 div 元素的拖拽效果，通过 mousemove 和 mouseup 事件控制元素位置。适合前端开发者了解并实践基本的拖拽交互。

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

<template>
    <div class='bag' >
 159
    <div class="a" v-drag>
    12312我
    </div>
 </div>
</template>

<script>
export default {
  directives:{
    drag(el,bind){
      el.onmousedown=function(e){
        var disx=e.pageX-el.offsetLeft;
        var disy=e.pageY-el.offsetTop;
        document.onmousemove=function(e){
          el.style.left=e.pageX-disx+'px';
          el.style.top=e.pageY-disy+'px';

        }
        document.onmouseup=function(){
          document.onmousemove=document.onmouseup=null
        }
      }
    }
  },
    data() {
        return {};
    },
    mounted() {},
    methods: {},
    components:{}
};
</script>

<style lang='scss'>
.bag{
  position: relative;
  .a{
    position: absolute;

  }
}
</style>