指令
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>
