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

指令

        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.createElement('div');//  新建父元素wrapper.className = 'scroll-middle'; // 这个类是自定义的滚动条类wrapper.style.overflowX = "auto";wrapper.style.overflowY = "hidden";// 将父元素添加进去drag.parentNode.replaceChild(wrapper, drag);//  获取子元素原来的父元素并将新父元素代替子元素wrapper.appendChild(drag);//  在新父元素下添加原来的子元素drag.ondragstart = function (e) {e = e || window.event;X = e.offsetX;e.dataTransfer.setDragImage(dragImg, 0, 0); //setDragImage(imgElement, x, y) };drag.ondrag = function (e) {if (drag.clientWidth > wrapper.clientWidth) {e = e || window.event;if (0 <= wrapper.scrollLeft &&wrapper.scrollLeft <= wrapper.scrollWidth &&e.clientX != 0) {// console.log("拖拽中", e, wrapper.scrollLeft + (X - e.offsetX));// wrapper.scrollTo(wrapper.scrollLeft + (X - e.offsetX), 0); // 两种皆可wrapper.scrollLeft = wrapper.scrollLeft + (X - e.offsetX)}}};// drag.ondragend = function (e) {//   console.log("拖拽结束", e);// };}// },// // 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。// bind(binding,) {//   console.log('bind');// },// // 所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。// // 转载请注明出处：https://blog.csdn.net/GeniusXYT/article/details/114372452// // 指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 // update() {//   console.log('update');// },// // 所在组件的 VNode 及其孩子的 VNode 全部更新时调用。// componentUpdated() {//   console.log('componentUpdated');// },// // 只调用一次，指令与元素解绑时调用。// unbind() {//   console.log('unbind');// }})

Vue文件

<template><div v-drag><span v-for="(s, i) in list" :key="i">{{ s }}</span></div>
</template><script>
export default {data() {return {list: ["富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善",],};},
};
</script><style scoped>
span {background-color: aliceblue;margin: 1vw;font-size: 4vw;color: rgb(53, 48, 48);
}
</style>