vue实现拖拽排版

Vue 实现拖拽排版的方法

使用原生 HTML5 拖拽 API

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

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      draggedIndex: null
    };
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index;
    },
    handleDrop(index) {
      const draggedItem = this.items[this.draggedIndex];
      this.items.splice(this.draggedIndex, 1);
      this.items.splice(index, 0, draggedItem);
    }
  }
};
</script>

使用第三方库 Vue.Draggable

Vue.Draggable 是一个基于 Sortable.js 的 Vue 组件，可以轻松实现拖拽排序功能。

安装 Vue.Draggable：

npm install vuedraggable

示例代码：

<template>
  <div>
    <draggable v-model="items" @end="onDragEnd">
      <div v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成');
    }
  }
};
</script>

使用拖拽库 interact.js

interact.js 是一个轻量级的拖拽库，可以用于实现复杂的拖拽交互。

安装 interact.js：

npm install interactjs

示例代码：

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      class="draggable-item"
      :ref="`item-${index}`"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
import interact from 'interactjs';

export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  },
  mounted() {
    this.items.forEach((_, index) => {
      interact(this.$refs[`item-${index}`][0]).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>
.draggable-item {
  width: 100px;
  height: 100px;
  background: #ccc;
  margin: 10px;
  cursor: move;
}
</style>

实现拖拽排序与动画

为了提升用户体验，可以添加过渡动画。Vue 提供了 <transition-group> 组件来实现列表动画。

<template>
  <div>
    <draggable v-model="items" @end="onDragEnd">
      <transition-group name="list">
        <div v-for="(item, index) in items" :key="index" class="item">
          {{ item }}
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成');
    }
  }
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.item {
  margin: 10px;
  padding: 10px;
  background: #f0f0f0;
}
</style>

拖拽与数据绑定

拖拽操作通常会改变数据顺序，确保数据与视图同步非常重要。Vue 的响应式系统可以自动处理这种同步。

<template>
  <div>
    <draggable v-model="items" @end="onDragEnd">
      <div v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </draggable>
    <button @click="logItems">打印当前顺序</button>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖拽完成');
    },
    logItems() {
      console.log(this.items);
    }
  }
};
</script>

通过以上方法，可以在 Vue 中实现灵活的拖拽排版功能。选择适合项目需求的方法，可以快速实现拖拽交互。