参考链接：
https://haofly.net/vue-dragscroll/
main.js
Vue.directive('dragscroll', function (el) { el.onmousedown = function (ev) { const disX = ev.clientX const disY = ev.clientY const originalScrollLeft = el.scrollLeft const originalScrollTop = el.scrollTop const originalScrollBehavior = el.style['scroll-behavior'] const originalPointerEvents = el.style['pointer-events'] el.style['scroll-behavior'] = 'auto' // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动 document.onmousemove = function (ev) { ev.preventDefault() const distanceX = ev.clientX - disX const distanceY = ev.clientY - disY // el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY) // 该写法不兼容IE，换成下面两行 el.scrollLeft = originalScrollLeft - distanceX el.scrollTop = originalScrollTop - distanceY // 由于我们的图片本身有点击效果，所以需要在鼠标拖动的时候将点击事件屏蔽掉 el.style['pointer-events'] = 'none' } document.onmouseup = function () { document.onmousemove = null document.onmouseup = null el.style['scroll-behavior'] = originalScrollBehavior el.style['pointer-events'] = originalPointerEvents } } })在.vue文件中使用
<div class="drag-box" v-dragscroll> <div class="drag-div"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div> <style> .drag-box{ width: 100%; overflow-x: auto; overflow-y: auto; cursor: move; } .drag-div { height: 200px; white-space: nowrap; } .drag-div div { box-sizing: border-box; white-space: normal; word-wrap: break-word; word-break: break-all; display: inline-block; width: 400px; height: 100%; margin-left: 20px; background: rgba(173, 216, 230, 0.63); border: 2px solid #6A8EF2; } </style>