指令

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>

總結

以上是生活随笔為你收集整理的自定义v-drag指令（横向拖拽滚动）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。