当前位置：首页 > VUE

vue实现拆分拖拽

2026-03-09 05:12:27VUE

Vue 实现拆分拖拽功能

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

使用 Vue.Draggable 库

Vue.Draggable 是基于 Sortable.js 的 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>

自定义拖拽实现

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

<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' } }

vue实现拆分拖拽


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

跨组件拖拽：


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

```

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

标签: 拖拽 vue

分享给朋友：

vue实现滚动中断

Vue 实现滚动中断的方法在 Vue 中实现滚动中断通常涉及监听滚动事件，并在特定条件下阻止默认行为或停止滚动。以下是几种常见方法：监听滚动事件并阻止默认行为通过 @scroll 或 @whe…

vue列表实现

Vue 列表实现方法使用 v-for 指令 v-for 是 Vue 中用于渲染列表的核心指令，基于数据源动态生成 DOM 元素。语法格式为 item in items 或 (item, index)…

vue实现发帖

使用 Vue 实现发帖功能前端实现创建发帖表单组件，包含标题和内容输入框，以及提交按钮。使用 v-model 绑定表单数据。 <template> <div>…

vue实现增加

实现 Vue 中的新增功能在 Vue 中实现新增功能通常涉及数据绑定、表单处理和状态管理。以下是几种常见的实现方式：数据绑定与列表渲染通过 v-model 绑定表单输入，使用数组的 push…

vue 实现长按

实现长按功能的基本思路在Vue中实现长按功能，通常需要监听元素的mousedown或touchstart事件，启动一个计时器。当用户按住元素超过设定的时间阈值时，触发长按回调函数。如果在时间阈值内触…

vue实现单击

Vue 实现单击事件的方法在 Vue 中实现单击事件可以通过 v-on 指令或简写的 @ 符号绑定事件处理器。以下是几种常见的实现方式：基础用法通过 v-on:click 或 @click 绑…

vue实现拆分拖拽