当前位置：首页 > VUE

vue实现拖拽滚动

2026-02-18 04:05:51VUE

vue实现拖拽滚动的方法

使用原生HTML5拖放API

在Vue中结合HTML5的拖放API实现拖拽滚动功能。通过draggable属性标记可拖拽元素，监听dragstart、dragover和drop事件控制滚动行为。

<template>
  <div 
    @dragover.prevent="handleDragOver"
    @drop="handleDrop"
    class="scroll-container"
  >
    <div 
      v-for="item in items" 
      :key="item.id"
      draggable="true"
      @dragstart="handleDragStart($event, item)"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item
      e.dataTransfer.effectAllowed = 'move'
    },
    handleDragOver(e) {
      const container = e.currentTarget
      const scrollSpeed = 10
      if (e.clientY < 100) {
        container.scrollTop -= scrollSpeed
      } else if (e.clientY > container.clientHeight - 100) {
        container.scrollTop += scrollSpeed
      }
    },
    handleDrop(e) {
      // 处理放置逻辑
    }
  }
}
</script>

使用第三方库vuedraggable

vuedraggable库封装了拖拽排序功能，结合自定义逻辑可实现滚动效果。安装后通过配置scroll属性启用自动滚动。

npm install vuedraggable

<template>
  <draggable 
    v-model="items"
    :scroll="true"
    :scrollSensitivity="50"
    :scrollSpeed="10"
    @start="onDragStart"
    @end="onDragEnd"
  >
    <div v-for="item in items" :key="item.id">
      {{ item.content }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      items: [...]
    }
  },
  methods: {
    onDragStart() {
      // 拖拽开始处理
    },
    onDragEnd() {
      // 拖拽结束处理
    }
  }
}
</script>

自定义拖拽滚动逻辑

通过鼠标事件模拟拖拽滚动效果，适合需要高度定制的场景。监听mousedown、mousemove和mouseup事件实现。

<template>
  <div 
    ref="scrollContainer"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="endDrag"
    @mouseleave="endDrag"
    class="scroll-container"
  >
    <div v-for="item in items" :key="item.id">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      isDragging: false,
      startY: 0,
      scrollTop: 0
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startY = e.pageY - this.$refs.scrollContainer.offsetTop
      this.scrollTop = this.$refs.scrollContainer.scrollTop
    },
    onDrag(e) {
      if (!this.isDragging) return
      const y = e.pageY - this.$refs.scrollContainer.offsetTop
      const walk = (y - this.startY) * 2
      this.$refs.scrollContainer.scrollTop = this.scrollTop - walk
    },
    endDrag() {
      this.isDragging = false
    }
  }
}
</script>

性能优化建议

对于大型列表实现拖拽滚动时需注意性能优化。使用虚拟滚动技术减少DOM节点数量，避免频繁的重排重绘。

<template>
  <virtual-list 
    :size="50"
    :remain="10"
    :data-key="'id'"
    :data-sources="items"
  >
    <template v-slot="{ source }">
      <div 
        draggable="true"
        @dragstart="handleDragStart($event, source)"
      >
        {{ source.content }}
      </div>
    </template>
  </virtual-list>
</template>

以上方法可根据具体需求选择或组合使用，注意处理边界情况和浏览器兼容性问题。

vue实现拖拽滚动