VUE实现某区域中拖拽效果

参考链接：

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>