vue.draggable filter 排除步允许拖动的元素

如果你想设置某个元素或对象不允许拖动拖拽把这些元素的样式名称设置到filter属性即可，本文将实现包含forbid样式的元素将无法拖动,第一行无法拖动,也无法拖动到第一行，用到filter和move属性。

filter属性

<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>

例子

完整代码

<template>
  <div> 
<!--使用draggable组件-->
<div class="itxst">
<div>包含forbid样式的元素将无法拖动,第一行无法拖动,也无法拖动到第一行</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:4,name:'www.taobao.com'}
        ] 
    };
  },
  methods: { 
      //禁止拖动到id为1的对象
       onMove(e){ 
         console.log(e.relatedContext.element.id);
        if(e.relatedContext.element.id==1) 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>