vuedraggable使用文档

vuedraggable使用文档

<draggable 
    class="image-list" 
    :list="fileList" 
    :animation="100" 
    item-key="id" 
    :forceFallback="true"
    ghost-class="ghost" 
    chosen-class="chosenClass"
    @change="onMoveCallback"
    >
    <template 
        #item="{ element }" 
        :key="element.uid"
        >
        <div class="image">
            <el-image :src="element.url" :preview-src-list="srcList" :initial-index="previewIndex" fit="fill"
                @show="show(element.index)" style="width: 100%; height: 100%" />
            <span class="del-image" v-if="!disabled" @click="handleRemove(element)">
                <el-icon>
                    <Close />
                </el-icon>
            </span>
        </div>
    </template>
</draggable>

/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="fileList"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
@change="onMoveCallback" //拖拽元素位置改变事件。会改变绑定数组的顺序，能读取当前被拖动的元素数据
*/

.ghost {
  border: solid 1px rgb(19, 41, 239);
}
.chosenClass {
  background-color: #f1f1f1;
}

属性说明

属性名称	说明
group	如果一个页面有多个拖拽区域，通过设置group名称可以实现多个区域之间相互拖拽 ，同一名称的group之间可以互相拖拽，或者 { name: “…”, pull: [true, false, ‘clone’, array , function], put: [true, false, array , function] }
sort	是否开启排序,如果设置为false,它所在组可拖动但是无法排序
delay	鼠标按下多少秒之后可以拖拽元素
touchStartThreshold	鼠标按下移动多少px才能拖动元素
disabled	:disabled= “true”,是否启用拖拽组件
animation	拖动时的动画效果，如设置animation=1000表示1秒过渡动画效果
handle	:handle=“.mover” 只有当鼠标在class为mover类的元素上才能触发拖到事件
filter	:filter=“.unmover” 设置了unmover样式的元素不允许拖动
draggable	:draggable=“.item” 样式类为item的元素才能被拖动
ghost-class	:ghost-class=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
chosen-class	:ghost-class=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
drag-class	:drag-class="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
force-fallback	默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true
fallback-class	默认false，克隆选中元素的样式到跟随鼠标的样式
fallback-on-body	默认false，克隆的元素添加到文档的body中
fallback-tolerance	按下鼠标移动多少个像素才能拖动元素，:fallback-tolerance=“8”
scroll	默认true,有滚动区域是否允许拖拽
scroll-fn	滚动回调函数
scroll-fensitivity	距离滚动区域多远时，滚动滚动条
scroll-speed	滚动速度
move	当拖动元素经过另一个元素触发，可获取当前元素数据draggedContext.element，以及当前元素原来的位置futureIndex,和移动后的index，不返回或者返回true代表可拖动，返回false不可拖动，可以用来设置某个元素不可被拖动元素替换

事件

属性名称	说明
@move	当拖动元素经过另一个元素触发
@change	元素位置改变后触发，可获取当前元素数据moved.element，以及当前元素原来的位置oldIndex,和移动后的newIndex
@start	开始移动事件
@end	结束移动事件