vue拖拽实现页面

Vue 拖拽实现页面的方法

使用 HTML5 原生拖拽 API

HTML5 提供了原生的拖拽 API，可以通过 draggable 属性和相关事件实现拖拽功能。在 Vue 中可以直接使用这些 API。

<template>
  <div>
    <div 
      draggable="true" 
      @dragstart="handleDragStart"
      @dragend="handleDragEnd"
    >
      拖拽元素
    </div>
    <div 
      @dragover.prevent
      @drop="handleDrop"
    >
      放置区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData('text/plain', '拖拽数据');
    },
    handleDrop(event) {
      const data = event.dataTransfer.getData('text/plain');
      console.log('接收到的数据:', data);
    },
    handleDragEnd() {
      console.log('拖拽结束');
    }
  }
};
</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>

使用拖拽库 interact.js

interact.js 是一个功能强大的拖拽库，支持更复杂的拖拽交互。

安装：

npm install interactjs

使用：

<template>
  <div ref="dragElement" class="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.getAttribute('data-x')) || 0) + event.dx;
          const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
          target.style.transform = `translate(${x}px, ${y}px)`;
          target.setAttribute('data-x', x);
          target.setAttribute('data-y', y);
        }
      });
  }
};
</script>

<style>
.drag-me {
  width: 100px;
  height: 100px;
  background: #ccc;
  cursor: move;
}
</style>

自定义拖拽实现

如果需要更灵活的拖拽逻辑，可以手动实现拖拽功能。

<template>
  <div 
    ref="dragElement"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="stopDrag"
    class="drag-me"
  >
    拖拽我
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.offsetX = this.$refs.dragElement.offsetLeft;
      this.offsetY = this.$refs.dragElement.offsetTop;
    },
    onDrag(event) {
      if (!this.isDragging) return;
      const dx = event.clientX - this.startX;
      const dy = event.clientY - this.startY;
      this.$refs.dragElement.style.left = `${this.offsetX + dx}px`;
      this.$refs.dragElement.style.top = `${this.offsetY + dy}px`;
    },
    stopDrag() {
      this.isDragging = false;
    }
  }
};
</script>

<style>
.drag-me {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #ccc;
  cursor: move;
}
</style>

以上方法可以根据需求选择适合的方式实现拖拽功能。