vue如何实现draggable

实现 Vue 中的拖拽功能

使用 HTML5 原生拖拽 API

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

<template>
  <div 
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    拖拽元素
  </div>
</template>

<script>
export default {
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', '拖拽数据');
    },
    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="draggableElement" class="draggable">
    可拖拽元素
  </div>
</template>

<script>
import interact from 'interactjs';

export default {
  mounted() {
    interact(this.$refs.draggableElement)
      .draggable({
        onmove: this.dragMoveListener
      });
  },
  methods: {
    dragMoveListener(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>

实现自定义拖拽指令

可以创建自定义指令实现拖拽功能，提供更大的灵活性。

Vue.directive('drag', {
  bind(el, binding) {
    let isDragging = false;
    let startX, startY, initialX, initialY;

    el.addEventListener('mousedown', startDrag);
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', endDrag);

    function startDrag(e) {
      isDragging = true;
      startX = e.clientX;
      startY = e.clientY;
      initialX = el.offsetLeft;
      initialY = el.offsetTop;
    }

    function drag(e) {
      if (!isDragging) return;
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      el.style.left = `${initialX + dx}px`;
      el.style.top = `${initialY + dy}px`;
    }

    function endDrag() {
      isDragging = false;
    }
  }
});

使用指令：

<div v-drag class="draggable-box"></div>

拖拽排序与状态管理

在复杂应用中，可能需要结合 Vuex 管理拖拽状态。

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ]
  },
  mutations: {
    updateItems(state, newItems) {
      state.items = newItems;
    }
  }
});

组件中使用：

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

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['items'])
  },
  methods: {
    ...mapMutations(['updateItems']),
    updateStore() {
      this.updateItems(this.items);
    }
  }
}
</script>

拖拽边界限制

可以使用 CSS 或 JavaScript 限制拖拽范围。

// 在 interact.js 示例中添加约束
interact(this.$refs.draggableElement)
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    onmove: this.dragMoveListener
  });

触摸设备支持

确保拖拽功能在移动设备上也能正常工作。

// 在自定义指令中添加触摸事件支持
el.addEventListener('touchstart', startDrag);
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);

性能优化

对于大量可拖拽元素，使用虚拟滚动等技术优化性能。

<template>
  <draggable v-model="largeList" v-infinite-scroll="loadMore">
    <div v-for="item in visibleItems" :key="item.id">
      {{ item.name }}
    </div>
  </draggable>
</template>

拖拽反馈效果

添加视觉反馈提升用户体验。

.draggable-item {
  transition: transform 0.2s ease;
}
.draggable-item.dragging {
  opacity: 0.5;
  transform: scale(1.05);
}

// 在拖拽事件中切换类名
function startDrag(e) {
  e.target.classList.add('dragging');
}
function endDrag(e) {
  e.target.classList.remove('dragging');
}