vue-drag-layout v1.2.0

vue-drag-layout

vue拖动布局

如何使用

• 安装

    npm install vue-drag-layout --save-dep

• 引入

    import Vue from 'vue';
    import DragToLayout from "vue-drag-layout";
  
    // autoSwap: 当拖拽元素移动至目标位置时 是否自动交替位置
    // 默认false
    Vue.use(DragToLayout, { autoSwap: false });

• 示例

    <template>
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          :item="item"
          v-dragToLayout="{
            group: 'example',
            list: list,
            item: item,
            // 可选，设置拖拽元素的可拖拽部分
            className: "drag-ele-class"
          }"
        ></li>
      </ul>
    </template>
  
    <script>
      export default {
        data() {
          return {
            list: [
              {
                id: '1',
                name: 'item1',
              },
              {
                id: '2',
                name: 'item2'
              }
            ]
          };
        },
  
        mounted() {
          const vm = this;
  
          vm.$dragging.$on('dragged', ($event) => {
            const {
              dragged,  // 拖拽完成的item
              to,       // 拖拽被替换的item
              group,    // 拖拽分组名
            } = $event;
  
            ...
          });
        },
      };
    </script>