VUE实现某区域中拖拽效果

最新推荐文章于 2024-06-19 14:45:00 发布

荻野泽溪

最新推荐文章于 2024-06-19 14:45:00 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/MISS_CJL/article/details/119378544

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

参考链接：

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>