Vue自定义v-draggable指令实现可自由拖动的盒子

前端 潘老师 3个月前 (12-06) 63 ℃ (0) 扫码查看



本文主要讲解关于Vue自定义v-draggable指令实现可自由拖动的盒子相关内容,让我们来一起学习下吧!

需求:

这里我们想要使这个盒子可以随意的上下左右拖动

需要我们在vue项目中创建一个自定义指定v-draggable,废话不多说直接上代码:

在main.js中

//引入Vue
import Vue from 'vue'
Vue.directive('draggable', {
    bind: function (el, binding, vnode) {
        var isDragging = false;
        var offsetX = 0;
        var offsetY = 0;

        el.addEventListener('mousedown', function (event) {
            isDragging = true;
            offsetX = event.clientX - el.offsetLeft;
            offsetY = event.clientY - el.offsetTop;
        });

        document.addEventListener('mousemove', function (event) {
            if (isDragging) {
                var left = event.clientX - offsetX;
                var top = event.clientY - offsetY;

                el.style.left = left + 'px';
                el.style.top = top + 'px';

                vnode.context.left = left;
                vnode.context.top = top;
            }
        });

        document.addEventListener('mouseup', function (event) {
            isDragging = false;
        });
    }
});

然后直接在div标签上使用v-draggable就可以实现拖动了(注意给div设置宽高哦)

<div class="draggle-test" v-draggable></div>

以上就是关于Vue自定义v-draggable指令实现可自由拖动的盒子相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12171.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】