当前位置：首页 > VUE

vue实现拆分拖拽

2026-01-17 00:09:03VUE

Vue 实现拆分拖拽功能

拆分拖拽通常指将一个元素拆分为多个部分，并允许用户通过拖拽重新排列或组合这些部分。以下是实现这一功能的几种方法：

使用 Vue.Draggable 库

Vue.Draggable 是基于 Sortable.js 的 Vue 组件，适用于列表拖拽排序。安装方式：

npm install vuedraggable

基础示例代码：

<template>
  <draggable v-model="list" group="items" @end="onDragEnd">
    <div v-for="element in list" :key="element.id">
      {{ element.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>

自定义拖拽实现

对于更复杂的拆分拖拽场景，可以使用 HTML5 的拖放 API：

<template>
  <div class="container">
    <div 
      v-for="item in items" 
      :key="item.id"
      draggable="true"
      @dragstart="dragStart(item)"
      @dragover.prevent
      @drop="drop(item)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '组件A' },
        { id: 2, text: '组件B' }
      ],
      draggedItem: null
    }
  },
  methods: {
    dragStart(item) {
      this.draggedItem = item
    },
    drop(targetItem) {
      const draggedIndex = this.items.indexOf(this.draggedItem)
      const targetIndex = this.items.indexOf(targetItem)
      this.items.splice(draggedIndex, 1)
      this.items.splice(targetIndex, 0, this.draggedItem)
    }
  }
}
</script>

拆分面板拖拽

对于面板拆分拖拽（如调整分割线两侧区域大小），可以使用鼠标事件：

<template>
  <div class="split-container">
    <div class="left-panel" :style="{ width: leftWidth + 'px' }"></div>
    <div 
      class="splitter" 
      @mousedown="startDrag"
    ></div>
    <div class="right-panel"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 200,
      isDragging: false
    }
  },
  mounted() {
    document.addEventListener('mousemove', this.onDrag)
    document.addEventListener('mouseup', this.stopDrag)
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.onDrag)
    document.removeEventListener('mouseup', this.stopDrag)
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX
      this.startWidth = this.leftWidth
    },
    onDrag(e) {
      if (this.isDragging) {
        const dx = e.clientX - this.startX
        this.leftWidth = this.startWidth + dx
      }
    },
    stopDrag() {
      this.isDragging = false
    }
  }
}
</script>

<style>
.split-container {
  display: flex;
  height: 100vh;
}
.left-panel {
  background: #f0f0f0;
}
.right-panel {
  flex: 1;
  background: #e0e0e0;
}
.splitter {
  width: 10px;
  background: #ccc;
  cursor: col-resize;
}
</style>

使用第三方组件库

一些 UI 框架提供了现成的拆分拖拽组件：

Element UI 的 SplitPane

<el-split v-model="split">
<template #left>
 <div>左侧内容</div>
</template>
<template #right>
 <div>右侧内容</div>
</template>
</el-split>

Ant Design Vue 的 Resizable

<a-resizable>
<a-resizable-panel :width="200" :min-width="100">
 左侧面板
</a-resizable-panel>
<a-resizable-trigger />
<a-resizable-panel>
 右侧面板
</a-resizable-panel>
</a-resizable>

这些方法可以根据具体需求选择使用，Vue.Draggable 适合列表项重排序，HTML5 拖放 API 适合自定义拖拽逻辑，而第三方组件库则提供了开箱即用的解决方案。

vue实现拆分拖拽