安装:
插件地址:https://www.npmjs.com/package/sortablejs
npm install sortablejs --save
pnpm add sortablejs --save
实现效果:
具体代码:
template部分的代码:
html
<div class="imgList flex mt-5" ref="uploadImgItem">
<div v-for="item in imgList" :key="item.fileOrder" class="imgItem">
<!-- <img :src="item.url" alt="" v-if="item.fileType === 'image'" /> -->
<el-image
v-if="item.fileType === 'image'"
style="width: 108px; height: 108px"
:src="item.url"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="[item.url]"
:initial-index="4"
fit="cover"
>
<template #error>
<div
style="width: 108px; height: 108px"
class="image-slot flex justify-center items-center"
@click="uploadErrorImgItem(item)"
>
重新加载
</div>
</template>
</el-image>
<video
:src="item.url"
v-if="item.fileType === 'video'"
ref="video"
controls
@pause="onVideoPause"
></video>
<div
@click="playVideo(item.url)"
class="videoMask flex items-center justify-center"
v-if="item.fileType === 'video' && !isPlay"
>
<img src="@/assets/icons/105.svg" alt="" />
</div>
<div class="deleteImg" @click="deleteFile(item.url)">
<img src="@/assets/icons/106.svg" alt="" />
</div>
</div>
</div>
script部分的代码:
javascript
import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue'
import Sortable from 'sortablejs'
const uploadImgItem = ref()
const imgList = ref<any>([])
//拖拽排序
const initDragSort = () => {
nextTick(() => {
// 选择包含所有可排序项目的容器
const el = uploadImgItem.value
// 确保 el 是一个有效的 DOM 元素
if (el) {
Sortable.create(el, {
group: 'shared', // 设置同一组内的元素可以互相排序
fallbackOnBody: true, // 如果需要的话,可以在 body 上进行拖拽
swapThreshold: 0.65, // 控制元素交换的阈值
onEnd: (/** 事件对象 */ evt: any) => {
// 获取旧的索引和新索引
const { oldIndex, newIndex } = evt
// 交换位置
const movedItem = imgList.value.splice(oldIndex, 1)[0]
imgList.value.splice(newIndex, 0, movedItem)
console.log(imgList.value)
}
})
}
})
}