vue-directive-draggable

通过 vue 指令的方式实现元素 drag 的功能，支持移动端和 PC 端。

• 安卓和桌面版使用 drag 和 drop 接口，ios 使用 touch 事件实现

Install

$ npm install vue-directive-draggable

Features

• 拖拽源对象添加dragging属性
• 拖拽目标对象添加drag-enter属性

Directive’s options.

v-dragging = "options"

Options

• Type: object

| 参数 | 类型 | 必填 | 说明 | | ---- | ------ | ---- | ---------------- | | list | array | true | 所有 item 的集合 | | name | string | true | 节点名 | | item | object | true | 节点数据 |

Item

| 参数 | 类型 | 必填 | 说明 | | ------------- | ------ | ----- | ---------------------- | | key | string | true | 唯一标识 | | followElmData | object | false | 跟随鼠标元素的对象数据 |

FollowElmData

| 参数 | 类型 | 必填 | 说明 | | ------ | --------------- | ----- | ---------------- | | src | Image | string | false | 拖拽对象支持图片 | | width | string | false | 拖拽对象宽 | | height | string | false | 拖拽对象高 |

example: Options.item

  {
    key: '1',
    followElmData:{
      src:'',
      width:'',
      height:''
    },
  },

Events

监听方法：vm.$dragging.$on(<eventName>)

| 事件名 | 回调参数 | 说明 | | --------- | ----------------------------------------------------------------- | -------------- | | dragStart | dragEventData：object; | 开始拖拽时触发 | | dragged | {form：dragEventData,to：dragEventData}；源对象数据，目标对象数据 | 拖动过程中触发 | | dragged | {form：dragEventData,to：dragEventData} | 拖动结束时触发 |

dragEventData

| 参数 | 类型 | 说明 | | ----- | ------- | -------------------------------- | | DDD | object | 整个操作组的数据，包含 list,item | | index | - | | | item | object | | | el | Element | 元素的 DOM 节点 |

Usage

<!-- demo.vue -->
 <template>
     <div class="list">
       <div
         class="item"
         v-for="item in list"
         v-dragging="{ item: item, list: list, name: 'listName' }"
         :key="item.key"
         :class="{'drag-enter': item['drag-enter']}"
         :style="{'background-color':item.backgroundColor}"
       >
         <div v-show="item['drag-enter']" class="placeholder">
           拖拽目标对象添加`drag-enter`属性
         </div>
         <div v-show="item.dragging" class="placeholder">
           拖拽源对象添加`dragging`属性
         </div>
       </div>
     </div>
 </template>
 <script>
  import Vue from 'vue';
  import vueDragging from 'vue-directive-draggable';
  Vue.use(vueDragging);

   export default {
     directives: {
         vueDragging,
     },
     data() {
       return {
           list: [
             {
               key: '1',
               backgroundColor:"red"
             },
             {
               key: '2',
               backgroundColor:"yellow"
             },
           ]
       }
     },
     mounted() {
       this.$dragging.$on('dragStart', originDada => {
         console.log(originDada);
       });
       this.$dragging.$on('dragged', draggedDate => {
           console.log(draggedDate);
       });
       this.$dragging.$on('dragend', dragendData => {
         console.log(dragendData);

         //交换源对象与目标对象的背景颜色
         let toColor = dragendData.to.item.backgroundColor;
         let fromColor = dragendData.from.item.backgroundColor;
         dragendData.to.item.backgroundColor = fromColor;
         dragendData.from.item.backgroundColor = toColor;
       });
     }
 }
 </script>
 <style>
   .item {
    width: 100px;
    height: 100px;
    transition: transform 1s;
    border: 1px black solid;
    box-sizing: border-box;
    margin: 0 auto;

   }
   .drag-enter {
     transform: scale(1.2);
   }
   .placeholder {
     background-color: white;
     width: 100%;
     height: 100%;
   }
 </style>