vue 自定义拖拽指令（单独文件），并改变data中数据的值

vue 自定义拖拽指令（单独文件），并改变data中数据的值

1. 新建directives文件夹，在文件夹下新建index.js文件
2. 在文件中写自定义指令

   import Vue from 'vue';
   
   const drag = Vue.directive('drag', {
     bind: function(el, binding) {
       var rolesList = binding.value.rolesList;
       console.log(rolesList)
       var tagId;
       // console.log(tagId)
       function dragStart(event) {
         var event = event || window.event;
         tagId = event.target.id;
         console.log(tagId)
         // console.log("开始拖拽");
         event.dataTransfer.dropEffect = 'move';
       }
       
       document.addEventListener('dragstart', dragStart);
       function dragEnter() {
         // console.log('进入目标元素');
       }
       document.addEventListener('dragenter', dragEnter);
       function dragOver(event) {
         var event = event || window.event;
         // console.log('在目标元素中拖拽');
         event.preventDefault();
       }
       document.addEventListener('dragover', dragOver);
       function dragLeave() {
         // console.log("拖放离开目标元素");
       }
       document.addEventListener('dragleave', dragLeave);
       function drop(event) {
         // console.log('拖放');
         var event = event || window.event;
         event.preventDefault();
         var roleId = event.target.id;
         var role = rolesList.find(item => item.role_id == roleId);
         if(role) {
           if(role.privileges.findIndex(item => item.menu_id == tagId) == -1) {
             role.privileges.push(rolesList[1].privileges.find(item => item.menu_id == tagId));
           } else {
             alert("已存在该权限");
           }
         }
         // binding.value.changePriv(rolesList);
       }
       document.addEventListener('drop', drop);
     }
   })
   
   export default {
     drag
   }
   

3. 在组件中引入并传值使用

   <template>
   	<div class="privilege-body w240 marT30 clearfix" v-drag="{rolesList:rolesList,changePriv:changePriv}">
   	    <div class="privilege-item pad0_15 disLB col-sm-6"  draggable="true" v-for="item in rolesList[1].privileges" :key="item.menu_id" :id="item.menu_id">
   	      <button class="marL10 marB10 pad0_10 tag bg-9">{{item.menu_name | filterPrivilege}}</button>
   	    </div>
   	</div>
   </template>
   
   <script>
   import {drag} from '../../directive/index'
   export default {
       data() {
           return {
               rolesList:[...]
           }
       }
   }
   </script>
   

   参考链接：
   vue自定义拖动指令