// in vue
import yubiDrag from 'yubidrag';

Vue.use(yubiDrag);

// other 会在body下面创建一个容器div标签
yubiDrag.install({});


// 准备好要被拖拽的结点
import { useDrag, componentDataKey } from 'yubidrag/index';

const switchList = document.querySelectorAll('#dragSwitch');
const buttonList = document.querySelectorAll('#componentButton');
const drag = useDrag([...buttonList, ...switchList], {
  onMoveStart: () => {
  },
  onMoveEnd: (data) => {
    console.log('on move end', data);
  }
});

// 停止拖拽 目前默认按Esc结束，此属性可自定义，在install的时候
drag.stop();


// componentDataKey的作用，挂载到具体属性上，当拖拽事件结束后，触发生命周期onMoveEnd中传回去
const componentDataKey = getComponentDataKey();

<div id="test" [componentDataKey]="JSON.stringify({
    test: '需要被挂载的东西'
  })"></div>