当前位置：首页 > VUE

vue实现拖动栏

2026-02-18 05:26:53VUE

Vue 实现拖动栏的方法

使用原生 HTML5 拖放 API

在 Vue 中可以通过 @dragstart、@dragover 和 @drop 等事件实现拖放功能。以下是一个简单示例：

<template>
  <div 
    class="draggable" 
    draggable="true"
    @dragstart="handleDragStart"
  >拖动元素</div>

  <div 
    class="dropzone"
    @dragover.prevent
    @drop="handleDrop"
  >放置区域</div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', e.target.id)
    },
    handleDrop(e) {
      const id = e.dataTransfer.getData('text/plain')
      const draggableElement = document.getElementById(id)
      e.target.appendChild(draggableElement)
    }
  }
}
</script>

使用第三方库 Vue.Draggable

Vue.Draggable 是基于 Sortable.js 的 Vue 拖拽组件，使用更加简单：

安装依赖：

npm install vuedraggable

使用示例：

<template>
  <draggable 
    v-model="list"
    @end="onDragEnd"
  >
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成')
    }
  }
}
</script>

自定义拖拽实现

对于更复杂的拖拽需求，可以结合鼠标事件实现：

<template>
  <div 
    class="drag-handle"
    @mousedown="startDrag"
  >拖动我</div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX
      this.startY = e.clientY
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    onDrag(e) {
      if (!this.isDragging) return
      const dx = e.clientX - this.startX
      const dy = e.clientY - this.startY
      // 更新元素位置
    },
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

响应式布局拖拽

如果需要实现可调整大小的分割面板：

<template>
  <div class="split-container">
    <div 
      class="split-panel left-panel"
      :style="{ width: leftWidth + 'px' }"
    >左侧内容</div>
    <div 
      class="split-handle"
      @mousedown="startResize"
    ></div>
    <div class="split-panel right-panel">右侧内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 200,
      isResizing: false
    }
  },
  methods: {
    startResize(e) {
      this.isResizing = true
      document.addEventListener('mousemove', this.doResize)
      document.addEventListener('mouseup', this.stopResize)
    },
    doResize(e) {
      if (!this.isResizing) return
      this.leftWidth = e.clientX
    },
    stopResize() {
      this.isResizing = false
      document.removeEventListener('mousemove', this.doResize)
      document.removeEventListener('mouseup', this.stopResize)
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，原生API适合简单场景，Vue.Draggable适合列表排序，自定义实现则适用于特殊需求。

vue实现拖动栏