1.实现图片拖拽排序功能效果如下：
2. 实现步骤
（1）首先安装vuedraggable
npm i --save vuedraggable
(2)vuedraggable相关属性文档说明（包含的部分属性）
| 属性名称 | 说明 |
|---|---|
| group | :group= “name”，相同的组之间可以相互拖拽或者 { name: “…”, pull: [true, false, ‘clone’, array , function], put: [true, false, array , function] } |
| sort | :sort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序 |
| delay | :delay= “0”, 鼠标按下后多久可以拖拽 |
| touchStartThreshold | 鼠标移动多少px才能拖动元素 |
| disabled | :disabled= “true”,是否启用拖拽组件 |
| animation | 拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果 |
| handle | :handle=“.mover” 只有当鼠标移动到css为mover类的元素上才能拖动 |
| filter | :filter=“.unmover” 设置了unmover样式的元素不允许拖动 |
| draggable | :draggable=“.item” 那些元素是可以被拖动的 |
| ghostClass | :ghostClass=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true |
| chosenClass | :ghostClass=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true |
| dragClass | :dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true |
| scroll | 默认true,有滚动区域是否允许拖拽 |
| scrollFn | 滚动回调函数 |
| scrollSensitivity | 距离滚动区域多远时，滚动滚动条 |
| scrollSpeed | 滚动速度 |
(3)具体案例代码实现
<template>
<div class="app-container">
<div :class="canEdit ? 'dargBtn-lock el-icon-unlock' : 'dargBtn-lock el-icon-lock'" @click="removeEvent()">
{
{
canEdit? '调整': '锁定' }}</div>
<ul class="projset-content">
<draggable :move="onMove" :list="imgList" handle=".dargBtn" :animation="200" filter=".undraggable">
<li v-for="(item, index) in imgList" :key="index" :class="canEdit ? 'draggable' : 'undraggable'">
<div class="dargBtn">
<svg-icon icon-class="drag" />
</div>
<el-image style="width: 100%; height: 100px" :src="item.path" :preview-src-list="srcList">
</el-image>
<span>{
{
item.name }}</span>
</li>
</draggable>
</ul>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable },
data() {
return {
canEdit: true,
imgList: [
{
path: 'https://img2.baidu.com/it/u=2969169350,1551254405&fm=253&fmt=auto&app=120&f=PNG?w=1280&h=800',
name: '1',
},
{
path: 'https://img1.baidu.com/it/u=1605341541,1182642759&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
name: '2',
},
{
path: 'https://img2.baidu.com/it/u=1979633876,2912484447&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
name: '3',
}
],
srcList: [
'https://img2.baidu.com/it/u=2969169350,1551254405&fm=253&fmt=auto&app=120&f=PNG?w=1280&h=800',
'https://img1.baidu.com/it/u=1605341541,1182642759&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
'https://img2.baidu.com/it/u=1979633876,2912484447&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
]
}
},
created() {
},
mounted() {
},
methods: {
onMove(relatedContext, draggedContext) {
console.log(relatedContext.relatedContext.list);
},
removeEvent(item) {
if (this.canEdit) {
this.canEdit = false;
} else {
this.canEdit = true;
}
console.log(this.canEdit);
}
}
}
</script>
<style scoped lang="scss">
.app-container {
background: #ffffff;
height: 100%;
.dargBtn-lock {
margin: 0px 50px;
color: #2ea9df;
}
.projset-content {
list-style-type: none;
position: relative;
li {
display: inline-block;
margin: 10px;
}
img {
width: 141px;
height: 100px;
}
span {
justify-content: center;
display: flex;
}
.dargBtn {
position: absolute;
line-height: 100px;
text-align: center;
width: 141px;
height: 100px;
display: none;
color: white;
background: rgba(101, 101, 101, 0.6);
z-index: 9999;
}
.draggable {
cursor: pointer;
width: 141px;
height: 100px;
}
.draggable:hover .dargBtn {
display: block;
}
}
}
</style>