vue.draggable move 自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠

vue.draggable move 自定义控制那些元素可以拖拽或不允许拖拽，实际业务场景往往会比较复杂，往往在拖拽过程中才能知道那些元素允许停靠，点击时才知道那些元素是否允许拖拽。

move拖拽事件

//move回调方法
onMove(e,originalEvent){ 
         console.log(e);
         console.log(originalEvent);
         //false表示阻止拖拽
         return true;
  },  
//e对象结构
draggedContext: 被拖拽的元素
      index: 被拖拽的元素的序号
      element: 被拖拽的元素对应的对象
      futureIndex: 预期位置、目标位置
relatedContext: 将停靠的对象
      index: 目标停靠对象的序号
      element: 目标的元素对应的对象
      list:  目标数组
      component: 将停靠的vue组件对象

例子

完整代码

<template>
  <div> 
<!--使用draggable组件-->
<div class="itxst">
<div>自定义控制拖拽和停靠</div>
<div class="col">
 <draggable v-model="arr1" filter=".forbid"  animation="300"  :move="onMove">
    <transition-group>
     <div :class="item.id==1?'item forbid':'item'" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
  </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
            draggable,
        },
  data() {
    return {  
      //定义要被拖拽对象的数组
      arr1:[
            { id: 1, name: 'www.itxst.com（不允许停靠）' },
            { id: 2, name: 'www.jd.com' },
            { id: 3, name: 'www.baidu.com' },
            { id: 5, name: 'www.google.com' },
            { id: 4, name: 'www.taobao.com（不允许拖拽）' }
        ] 
    };
  },
  methods: { 
      //move回调方法
       onMove(e,originalEvent){ 
         //不允许停靠
         if (e.relatedContext.element.id == 1) return false;
         //不允许拖拽
         if (e.draggedContext.element.id == 4) return false;
         return true;
      },  
  },
};
</script>
<style scoped>
  /*定义要拖拽元素的样式*/
      .itxst {
          margin: 10px;
           text-align :left;
      }
      .col {
          width: 80%;
          flex: 1;
          padding: 10px;
          border: solid 1px #eee;
          border-radius: 5px;
          float: left;
      }
      .col + .col {
          margin-left: 10px;
      }
      .item {
          padding: 6px 12px;
          margin: 0px 10px 0px 10px;
          border: solid 1px #eee;
          background-color: #f1f1f1;
          text-align: left;
      }
      .item + .item {
          border-top: none;
          margin-top: 6px;
      }

      .item:hover {
          background-color: #fdfdfd;
          cursor: move;
      }
</style>