vue中使用vuedraggable实现图片的拖拽排序以及预览等功能

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>