vue实现拆分拖拽

Vue 实现拆分拖拽功能

拆分拖拽通常指将页面元素拆分为多个可拖拽的部分，并能独立控制它们的拖拽行为。以下是基于 Vue 的实现方法：

使用 Vue.Draggable 库

Vue.Draggable 是基于 Sortable.js 的 Vue 组件，适合实现列表拖拽和拆分拖拽功能。

安装依赖：

npm install vuedraggable

基础示例代码：

<template>
  <div>
    <draggable 
      v-model="list1" 
      group="items" 
      @start="dragStart" 
      @end="dragEnd"
    >
      <div v-for="item in list1" :key="item.id">{{ item.name }}</div>
    </draggable>

    <draggable 
      v-model="list2" 
      group="items" 
      @start="dragStart" 
      @end="dragEnd"
    >
      <div v-for="item in list2" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list1: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      list2: [
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' }
      ]
    }
  },
  methods: {
    dragStart() {
      console.log('Drag started')
    },
    dragEnd() {
      console.log('Drag ended')
    }
  }
}
</script>

自定义拖拽实现

如果需要更精细的控制，可以使用原生 HTML5 拖拽 API：

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      draggable="true"
      @dragstart="handleDragStart($event, item)"
      @dragend="handleDragEnd"
    >
      {{ item.name }}
    </div>

    <div 
      class="drop-zone"
      @dragover.prevent
      @drop="handleDrop"
    >
      拖拽到这里
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      draggedItem: null
    }
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item
      e.dataTransfer.effectAllowed = 'move'
    },
    handleDragEnd() {
      this.draggedItem = null
    },
    handleDrop(e) {
      if (this.draggedItem) {
        // 处理拖拽后的逻辑
        console.log('Dropped:', this.draggedItem)
      }
    }
  }
}
</script>

<style>
.drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  margin-top: 20px;
}
</style>

复杂布局拆分拖拽

对于更复杂的布局拆分（如面板分割），可以使用第三方库如 Split.js：

安装 Split.js：

npm install split.js

示例实现：

<template>
  <div class="split-container">
    <div id="left-panel">左侧面板</div>
    <div id="right-panel">右侧面板</div>
  </div>
</template>

<script>
import Split from 'split.js'

export default {
  mounted() {
    Split(['#left-panel', '#right-panel'], {
      sizes: [50, 50],
      minSize: 100,
      gutterSize: 8,
      cursor: 'col-resize'
    })
  }
}
</script>

<style>
.split-container {
  display: flex;
  height: 100vh;
}

#left-panel, #right-panel {
  background: #f0f0f0;
  overflow: auto;
}

.gutter {
  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: 50%;
}
</style>

以上方法可以根据具体需求选择使用，Vue.Draggable 适合列表项拖拽，原生 API 提供更基础的控制，而 Split.js 则适合面板分割拖拽场景。