vue自定义指令实现拖拽

最新推荐文章于 2024-08-29 15:10:00 发布

MakabakaGoodnight

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量1.1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/queryselectorall/article/details/123051989

版权

本文介绍如何在Vue.js应用中创建一个自定义指令，用于实现元素的拖拽功能。通过在main.js中全局注册该指令，并在需要的div上应用，可以轻松实现拖放效果。在插入指令时，可以通过获取父节点的事件来处理拖拽过程中的细节，以适应不同的应用场景。

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

创建拖拽的自定义指令，然后在main.js里面注册到全局即可。

import Vue from 'vue';
const drag = Vue.directive('drag', {
    // 指令绑定到元素上回立刻执行bind函数，只执行一次
    bind: function (el) {

    },
    //inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
    inserted: function (el) {
        // console.log(e.parentNode)
        // let el = e.parentNode;
        // let el = e;
        let wMax = document.documentElement.clientWidth - el.offsetWidth;
        let hMax = document.documentElement.clientHeight - el.offsetHeight;

        if ("ontouchstart" in window) { // 移动端
            el.ontouchstart = function (e) {
                let time1 = new Date().getTime();
                let x = e.touches[0].pageX - el.offsetLeft;
                let y = e.touches[0].pageY - el.offsetTop;
                // 抑制浏览器端默认拖拽行为，移动端是拖拽屏幕，pc端无
                // e.preventDefault(); 开启后点击 子集点击事件事件会无效
                document.ontouchm