自定义v-drag指令（横向拖拽滚动）

最新推荐文章于 2025-11-20 08:36:33 发布

原创

最新推荐文章于 2025-11-20 08:36:33 发布 · 置顶 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了一种在Vue中实现元素拖拽的方法，通过自定义指令实现元素的拖拽及平滑滚动效果，并展示了如何使用该指令进行列表项的拖动。

指令

        Vue.directive('drag', {
   
   
            // 钩子函数，被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。
            inserted: (el, binding, vnode, oldVnode) => {
   
   
                console.log(el, binding, vnode, oldVnode)
                let drag = el; // 要拖拽的元素
                // let wrapper = el.parentElement;
                let dragImg = document.createElement("span"); // 拖拽图标
                let X = 0;

                drag.draggable = "true" // 使元素可直接拖拽
                drag.style.width = "max-content" // 使元素充满容器
                drag.appendChild(dragImg) // 添加拖拽图标，不添加则默认显示拖拽元素
                
                // 给元素添加父元素
                let wrapper = document.createEleme