自定义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>

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

拖拽之路（五）：自定义QListWidget实现美观的拖拽样式（拖拽不影响选中 + doAutoScroll）
环境配置 :MinGW + QT 5.12 效果图: 这种自定义拖拽样式的灵感来自于Chrome浏览器的书签栏.文章中所使用的自定义QListWidget来自于:自定义QListWidget实现ite ...
拖拽之路（四）：自定义QListView实现美观的拖拽样式（拖拽不影响选中）
环境配置 :MinGW + QT 5.12 效果图(左边是QListView拖拽即选中样式,右边是拖拽不影响选中样式): 这种自定义拖拽样式的灵感来自于Chrome浏览器的书签栏.本文中拖拽的特点是: ...
拖拽之路（原生之初一）：自定义QListWidget实现美观的拖拽样式
环境配置 :MinGW + QT 5.12 效果图(左边是QListWidget传统拖拽样式,右边是自定义拖拽样式): 这种自定义拖拽样式的灵感来自于Chrome浏览器的书签栏.这篇文章命名为 &qu ...
拖拽之路（二）：自定义QListWidget实现美观的拖拽样式（拖拽不影响选中）
环境配置 :MinGW + QT 5.12 效果图(左边是拖拽即选中,右边是拖拽不影响选中): 这种自定义拖拽样式的灵感来自于Chrome浏览器的书签栏.文章中所使用的自定义QListWidget来自 ...
拖拽之路（一）：自定义QListWidget实现美观的拖拽样式（拖拽即选中）
环境配置 :MinGW + QT 5.12 效果图(左边是QListWidget传统拖拽样式,右边是自定义拖拽样式): 这种自定义拖拽样式的灵感来自于Chrome浏览器的书签栏.文章中所使用的自定义Q ...
element-ui el-dialog侧边弹窗可横向拖拽改变宽度
el-dialog侧边弹窗可横向拖拽改变宽度,并且存储到localStorage,刷新页面后依然是拖拽后的宽度 Vue.directive('dialogDrag', {inserted: funct ...
java drag drop_原生拖拽,拖放事件(drag and drop)
原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事 ...
【Android】HorizontalScrollView内子控件横向拖拽
前言网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 声明欢迎转载,但请保留文章原始出处:) 博客园 ...
vue aplayer 进度条无法拖动_「最近项目小结」使用Vue实现一个简单的鼠标拖拽滚动效果插件...
演示事例 http://www.longstudy.club/vue-drag-scroll/index.html 最近在做一个新的项目,有个需求是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会 ...

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

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

最新文章

热门文章