<template>
    <div>
        <slot></slot>
    </div>
</template>
<script>
import Sortable from "sortablejs";

export default {
  name: "v-draggable",
  props: {
    //分组名称
    group: {
      type: String,
      required: true
    },
    //动画效果持续时间
    animation: {
      type: Number,
      default: 150
    },
    //触发元素拖动事件的选择器
    handle: {
      type: String,
      default: null
    },
    //设置容器内可拖动元素的样式标识
    draggable: {
      type: String,
      default: ">*"
    }
  },
  data() {
    return {
      currentDraggableEle: null,
      sortable:null
    };
  },
  methods: {
    //元素开始拖动
    onStart(e) {
        this.$emit('start',e);
    },
    //元素结束拖动
    onEnd(e) {
        this.$emit('end',e);
    }
  },
  mounted() {
    this.$nextTick(() => {
      let self = this;

      //对外暴露的属性
      let defaultPropertys = ["group", "animation", "handle", "draggable"];
      let propertys = {};
      defaultPropertys.forEach(property => {
        propertys[property] = self[property];
      });

      //对外暴露的事件
      let defaultMethods = ["onStart", "onEnd"];
      let methods = {};
      defaultMethods.forEach(method => {
        methods[method] = self[method];
      });

      let option = Object.assign({}, propertys, methods);
      self.sortable= new Sortable(this.$el, option);

    });
  },
  destroyed() {
      this.sortable.destroy();
  }
};
</script>

