当前位置：首页 > VUE

vue实现拖动布局

2026-02-19 19:31:44VUE

Vue 实现拖动布局的方法

使用 `vuedraggable` 库

vuedraggable 是基于 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>

使用 HTML5 原生拖拽 API

通过原生 draggable 属性和事件实现基础拖拽功能。

示例代码：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Box 1' },
        { id: 2, text: 'Box 2' }
      ],
      draggedItem: null
    };
  },
  methods: {
    handleDragStart(e, item) {
      this.draggedItem = item;
      e.dataTransfer.effectAllowed = 'move';
    },
    handleDrop(e, targetItem) {
      if (this.draggedItem !== targetItem) {
        const fromIndex = this.items.indexOf(this.draggedItem);
        const toIndex = this.items.indexOf(targetItem);
        this.items.splice(fromIndex, 1);
        this.items.splice(toIndex, 0, this.draggedItem);
      }
    }
  }
};
</script>

使用 `interact.js` 实现自由拖拽

适合需要自由拖动和调整大小的场景。

安装依赖：

npm install interactjs

示例代码：

<template>
  <div ref="dragElement" class="draggable-box">Drag me</div>
</template>

<script>
import interact from 'interactjs';
export default {
  mounted() {
    interact(this.$refs.dragElement)
      .draggable({
        onmove: (event) => {
          const target = event.target;
          const x = (parseFloat(target.style.left) || 0) + event.dx;
          const y = (parseFloat(target.style.top) || 0) + event.dy;
          target.style.left = `${x}px`;
          target.style.top = `${y}px`;
        }
      });
  }
};
</script>

<style>
.draggable-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #eee;
  cursor: move;
}
</style>

使用 `vue-drag-resize` 实现拖拽和缩放

适用于需要同时支持拖拽和调整大小的组件。

安装依赖：

npm install vue-drag-resize

示例代码：

vue实现拖动布局

<template>
  <VueDragResize 
    :w="200" :h="200" 
    @dragging="onDrag" 
    @resizing="onResize"
  >
    Content
  </VueDragResize>
</template>

<script>
import VueDragResize from 'vue-drag-resize';
export default {
  components: { VueDragResize },
  methods: {
    onDrag(newRect) {
      console.log('新位置:', newRect.left, newRect.top);
    },
    onResize(newRect) {
      console.log('新尺寸:', newRect.width, newRect.height);
    }
  }
};
</script>