vue-directive-draggable

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>