Vue-Drag 拖拽组件

组件代码：

<!-- 拖拽组件，使用说明见 README.md，-->
<template>
  <div class='YxkDrag'>
    <VDraggable v-bind="dragBind(dragObj)" @start="dragStart" @end="dragEnd" v-on="this.$listeners">
      <!-- 默认图片拖拽 -->
      <template v-if="!isCustomDrag">
        <li v-for="(item, index) in dragObj.list" :key="index" :class="['draggable__item', item.class]">
          <el-image v-bind="imageBind(item)"></el-image>
        </li>
      </template>
      <!-- 自定义拖拽内容 -->
      <template v-else>
        <slot></slot>
      </template>
    </VDraggable>
  </div>
</template>

<script>
  import VDraggable from "vuedraggable";

  export default {
    name: 'YxkDrag',
    componentName: 'YxkDrag',
    props: {
      dragObj: {
        type: Object,
        default: () => {
          return {
            list: []
          }
        }
      }
    },
    components: {
      VDraggable
    },
    data() {
      return {
        isCustomDrag: false,
        defaultBind: { // 拖拽默认属性
          options: {
            animation: 150,
            ghostClass: "sortable-ghost",
            chosenClass: "chosenClass",
            scroll: true,
            scrollSensitivity: 200,
          }
        }
      }
    },
    methods: {
      // v-bind
      dragBind(obj) {
        if(obj.list) this.defaultBind['v-model'] = obj.list
        // 插槽无内容时默认图片拖拽
        if (this.$slots.default) {
          this.isCustomDrag = true
        } else {
          this.defaultBind.tag = 'ul'
          this.defaultBind.draggable = '.draggable__item'
        }
        if (obj.options) {
          Object.assign(obj.options, this.defaultBind.options)
        }
        return {
          ...this.defaultBind,
          ...obj
        }
      },
      imageBind(obj) {
        // 默认值
        let defaultImage = {
          src: obj.src,
          'preview-src-list': [obj.src],
          fit: "cover",
          style: this.dragObj.styles || {
            width: '100px',
            height: '100px'
          }
        }
        return defaultImage
      },
      // 拖拽事件
      dragStart() {
        this.$emit("dragStart", this.dragObj)
      },
      dragEnd() {
        this.$emit('dragEnd', this.dragObj)
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {}
  }
</script>

<style lang='scss'>
  .YxkDrag {
    ul {
      display: flex;
      flex-wrap: wrap;

      .draggable__item {
        position: relative;
        height: 100px;

        &:not(:last-child) {
          margin: 0 10px 10px 0;
        }
      }
    }
  }
</style>
// 插件 vuedraggable

示例：

 

 

参数说明：