vueDraggable-属性-(最后)

animation 过渡效果

参数	说明	类型
animation	动画时间单位:ms	Number

通过animation属性设置vue.draggable过渡效果，这样拖动时过渡位置就不会显的太生硬。

<draggable v-model="arr1"   animation="300">
   <transition-group>
       <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
   </transition-group>
 </draggable>

animation 属性演示

代码详情点击，可以查看到详细的代码。

handle属性

参数	说明	类型
handle	选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动	Selector

当鼠标落在handle指定的元素上面时才允许拖动，如下面的例子只能点击加号区域才能拖动，点击其他区域则无法拖动。

<draggable v-model="arr1"  handle=".mover"  animation="300">
   <transition-group>
       <div class="item" v-for="item in arr1" :key="item.id">
           <span class="mover">+</span>
           {{item.name}}
       </div>
   </transition-group>
 </draggable>

handle 属性演示

代码详情点击，可以查看到详细的代码。

filter属性

参数	说明	类型
filter	定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔	Selector

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

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

filter属性演示

代码详情点击，可以查看到详细的代码。

chosenClass属性和ghostClass属性

参数	说明	类型
chosenClass	目标被选中时添加	Selector
ghostClass	当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class	Selector
dragClass	目标被拖动时添加	Selector

chosenClass属性-选中样式

通过vue.draggable的chosenClass属性设置选中元素的样式，可以通过自定义样式来方便的区分出那个元素被选中。

ghostClass属性-移动占位样式

vue.draggable ghostClass 目标位置占位符的样式及需要停靠位置的样式。

chosenClass和ghostClass属性演示

代码详情点击，可以查看到详细的代码。

clone属性

参数	说明	类型
clone	返回值为true时克隆，可以理解为正常的拖拽变成了复制。当pull:clone时的拖拽的回调函数	Function

从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。handleContainerWidgetCloneclone的回调方法。

<draggable 
    v-model="arr1" 
    :group="{name:'site', pull:'clone',put: false, sort: true}"
    :clone="handleContainerWidgetClone"
    >
      <transition-group>
        <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
      </transition-group>
 </draggable>

clone属性演示

代码详情点击，可以查看到详细的代码。

系列相关推荐: