vue3实现拖拽排序

效果:
在这里插入图片描述
实现

<template>
  <div class="box">
    <div
      v-for="(item, index) in items"
      :key="item.id"
      class="item"
      :style="{ order: item.order }"
      :draggable="true"
      @dragstart="onDragStart(index)"
      @dragover.prevent="onDragOver"
      @drop="onDrop(index, $event)">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const items = ref([
  { id: 1, name: "Item 1", order: 1 },
  { id: 2, name: "Item 2", order: 2 },
  { id: 3, name: "Item 3", order: 3 },
]);
let draggedIndex = null;

const onDragStart = (index) => {
  draggedIndex = index;
};

const onDragOver = (event) => {
  event.preventDefault();
};

const onDrop = (targetIndex, event) => {
  event.preventDefault();
  if (draggedIndex !== targetIndex) {
    const draggedOrder = items.value[draggedIndex].order;
    const targetOrder = items.value[targetIndex].order;
    items.value[draggedIndex].order = targetOrder;
    items.value[targetIndex].order = draggedOrder;
  }
};
</script>

<style>
.box {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background-color: #f3f3f3;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  cursor: move;
  user-select: none;
  transition: background-color 0.3s;
}
.item:active {
  background-color: #ddd;
}
</style>

核心就是 flex布局 的 order属性

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 的组件拖拽排序可以通过使用 `Sortable.js` 库来实现。以下是一个简单的示例: 1. 安装 `Sortable.js` 库: ``` npm install sortablejs --save ``` 2. 在需要排序的组件中导入 `Sortable.js`: ```javascript import Sortable from 'sortablejs'; ``` 3. 在组件的 `mounted` 钩子中初始化排序: ```javascript mounted() { const el = this.$refs.sortable; this.sortable = Sortable.create(el, { onEnd: this.onSortEnd }); }, ``` 4. 创建 `onSortEnd` 方法来处理排序结束后的逻辑: ```javascript methods: { onSortEnd(event) { const itemEl = event.item; const newIndex = event.newIndex; // 处理排序结束后的逻辑 } } ``` 5. 在组件中添加拖拽排序的 HTML: ```html <template> <div ref="sortable"> <div v-for="(item, index) in items" :key="item.id"> {{ item.text }} </div> </div> </template> ``` 在以上代码中,`items` 是一个数组,包含需要排序的项目。将 `items` 数组绑定到组件的属性中即可。 完整的代码示例: ```javascript <template> <div ref="sortable"> <div v-for="(item, index) in items" :key="item.id"> {{ item.text }} </div> </div> </template> <script> import Sortable from 'sortablejs'; export default { data() { return { items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' }, { id: 4, text: 'Item 4' } ], sortable: null }; }, mounted() { const el = this.$refs.sortable; this.sortable = Sortable.create(el, { onEnd: this.onSortEnd }); }, methods: { onSortEnd(event) { const itemEl = event.item; const newIndex = event.newIndex; // 处理排序结束后的逻辑 } } }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值