当前位置：首页 > VUE

vue中拖拽实现布局

2026-02-23 06:36:22VUE

Vue 中实现拖拽布局的方法

使用 HTML5 原生拖拽 API

HTML5 提供了原生的拖拽 API，可以通过 draggable 属性、dragstart、dragend、dragover 和 drop 事件实现基础拖拽功能。

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @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 draggedElement = document.getElementById(id);
      e.target.appendChild(draggedElement);
    }
  }
};
</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('拖拽结束', this.list);
    }
  }
};
</script>

使用 Vue.Draggable 实现网格布局

结合 CSS Grid 或 Flexbox 实现网格拖拽布局。

<template>
  <div class="grid-container">
    <draggable 
      v-model="gridItems" 
      v-bind="dragOptions"
      @end="onDragEnd"
    >
      <div 
        v-for="item in gridItems" 
        :key="item.id" 
        class="grid-item"
      >
        {{ item.content }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      gridItems: [
        { id: 1, content: 'Box 1' },
        { id: 2, content: 'Box 2' }
      ],
      dragOptions: {
        animation: 200,
        group: 'grid',
        ghostClass: 'ghost'
      }
    };
  }
};
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  background: #eee;
  padding: 20px;
}
.ghost {
  opacity: 0.5;
}
</style>

自定义拖拽指令

通过 Vue 自定义指令实现更灵活的拖拽逻辑。

<template>
  <div v-draggable class="draggable-box">
    自定义拖拽元素
  </div>
</template>

<script>
export default {
  directives: {
    draggable: {
      inserted(el) {
        el.draggable = true;
        el.style.cursor = 'move';

        el.addEventListener('dragstart', (e) => {
          e.dataTransfer.setData('text/plain', el.id);
          el.classList.add('dragging');
        });

        el.addEventListener('dragend', () => {
          el.classList.remove('dragging');
        });
      }
    }
  }
};
</script>