当前位置：首页 > VUE

vue实现拆分拖拽

2026-03-09 05:12:27VUE

Vue 实现拆分拖拽功能

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

使用 Vue.Draggable 库

Vue.Draggable 是基于 Sortable.js 的 Vue 组件，适合实现拖拽排序功能。

安装依赖：

vue实现拆分拖拽

npm install vuedraggable

基础示例：

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

<script>
import draggable from 'vuedraggable'

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

自定义拖拽实现

如果需要更精细的控制，可以手动实现拖拽逻辑。

vue实现拆分拖拽

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    draggable="true"
    @dragstart="startDrag($event, item)"
    @dragover.prevent
    @drop="onDrop($event, item)"
  >
    {{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      draggedItem: null
    }
  },
  methods: {
    startDrag(event, item) {
      this.draggedItem = item
    },
    onDrop(event, targetItem) {
      if (this.draggedItem) {
        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>

拆分面板拖拽

对于可拆分的面板布局，可以结合 CSS Grid 或 Flexbox 实现。

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

<script>
export default {
  data() {
    return {
      panels: [
        { id: 1, title: 'Panel 1' },
        { id: 2, title: 'Panel 2' }
      ],
      draggedPanel: null
    }
  },
  methods: {
    dragStart(panel) {
      this.draggedPanel = panel
    },
    drop(targetPanel) {
      const draggedIndex = this.panels.indexOf(this.draggedPanel)
      const targetIndex = this.panels.indexOf(targetPanel)

      this.panels.splice(draggedIndex, 1)
      this.panels.splice(targetIndex, 0, this.draggedPanel)
    }
  }
}
</script>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.panel {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

高级功能扩展

限制拖拽方向：


<draggable v-model="items" :move="checkMove">
<!-- 内容 -->
</draggable>

methods: { checkMove(evt) { return evt.draggedContext.element.type !== 'forbidden' } }


2. 动画效果：
```vue
<draggable v-model="items" animation="200">
  <!-- 内容 -->
</draggable>

跨组件拖拽：


<draggable v-model="list1" group="shared">
<!-- 列表1内容 -->
</draggable>

```

以上方法提供了从简单到复杂的拖拽实现方案，可根据具体需求选择合适的实现方式。

标签: 拖拽 vue

分享给朋友：

vue实现按钮组轮换

实现按钮组轮换的方法在Vue中实现按钮组轮换效果可以通过动态绑定类和事件处理来完成。以下是一种常见的实现方式：模板部分 <template> <div class="bu…

vue实现弹窗可切换

实现弹窗可切换的 Vue 方案动态组件切换通过 Vue 的 <component :is="currentComponent"> 动态加载不同弹窗组件，结合 v-if 控制显示状态。…

vue实现菜单栏锚点

实现锚点菜单的基本思路在Vue中实现菜单栏锚点功能，主要涉及两个方面：创建可跳转的锚点位置，以及菜单项的点击滚动控制。通过监听滚动事件可以高亮当前可见区域的对应菜单项。创建页面锚点位置在需要跳…

vue实现图库

Vue 实现图库的基本方法使用 Vue 实现图库功能可以通过多种方式完成，以下是一些常见的方法和实现步骤。使用 Vue 和第三方库（如 Vue Gallery）安装 vue-gallery 或…

vue实现公告

Vue 实现公告功能的方法公告功能通常需要实现滚动展示、自动切换或固定显示的效果。以下是几种常见的实现方式：使用 marquee 标签实现滚动公告 <template> <…

vue 实现轮播

Vue 实现轮播的方法使用第三方库（如 Swiper）安装 Swiper 库： npm install swiper 在 Vue 组件中引入 Swiper： <template&…

vue实现拆分拖拽