<vuedraggable class="images" v-model="ids" @end="updateValue" > <div class="item" v-for="(item, index) in list"> <a-icon class="action-item delete-icon" type="delete" @click.stop="deleteItem(item)"></a-icon> <img :src="item.thumb" class="thumb" /> <div class="type-c">{{item.type_text}}</div> <div class="status-c" v-if="item.status == 0">已下架</div> <div class="title" :title="item.title">{{item.title}}</div> </div> </vuedraggable> 第一次移动被移动的总是会到第一个的位置
时间: 2023-07-06 09:35:10 浏览: 73
<div class="top">我的网页设计作业</div>
根据你提供的代码,可能是由于你的数据源 `list` 中的第一个元素,也就是 `v-for` 中的 `item`,在数据源中的位置是第一位,而 `vuedraggable` 默认会将第一个元素作为默认拖拽的元素。这会导致第一次移动时会将被移动的元素放到第一个位置。
为了解决这个问题,你可以使用 `vuedraggable` 的 `clone` 属性将被拖拽的元素进行克隆,这样第一次移动时不会影响原始的数据源。代码如下:
```
<vuedraggable class="images" v-model="ids" @end="updateValue" :clone="cloneElement">
<div class="item" v-for="(item, index) in list" :key="item.id">
...
</div>
</vuedraggable>
```
在 `vuedraggable` 中添加了 `:clone="cloneElement"` 属性,表示在拖拽时使用 `cloneElement` 方法进行克隆。你可以在组件中添加一个 `cloneElement` 方法,代码如下:
```
methods: {
// 克隆被拖拽的元素
cloneElement(el) {
return el.cloneNode(true);
},
...
}
```
这样,第一次移动时被移动的元素将会被克隆,不会影响原始的数据源,同时也不会被放到第一个位置。
阅读全文