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文件中使用

     
         
1
         
2
         
3
         
4
         
5