vuedraggable
安装
npm i -S vuedraggable
yarn add vuedraggable
引入
import draggable from'vuedraggable'
demo
<template>
<div class="app-container">
<div :class="canEdit? 'dargBtn-lock el-icon-unlock': 'dargBtn-lock el-icon-lock' " @click="removeEvent()">{{canEdit? '调整':'锁定'}}</div>
<ul class="projset-content">
<draggable
v-model="mpcListData"
@start="onStart"
@end="onEnd"
:options="{sort: true}"
ghost-class="ghost"
dragClass="drag-style"
chosenClass="chosen-style"
:animation="1000"
:forceFallback="true"
>
<li v-for="(item, index) in mpcListData" :key="index" :class="canEdit ? 'draggable' : 'undraggable'">
<div class="dargBtn">
<svg-icon icon-class="drag" />
</div>
<img :src="item.path" alt="">
<span>{{item.name}}</span>
</li>
</draggable>
</ul>
</div>
</template>
// 开始拖拽事件
onStart() {
},
// 拖拽结束事件
onEnd() {
}
// 样式调整
.ghost {
opacity: 0 !important;
background: #c8ebfb;
}
.drag-style {
opacity: 1 !important;
border: 4px solid #409eff;
}
参数说明
| 属性 | 类型 | 示例值 | 描述 |
|---|---|---|---|
| group | String / Array | group="name" | 用于分组，同一组的不同列表可以相互拖动 |
| list | Array | list=[] | 设置可拖拽的元素列表 |
| sort | Boolean | sort="true" | 是否开启内部排序，如果设为false则所在组无法进行排序 |
| delay | Number | delay="0" | 鼠标选中后开始拖拽的延迟时间 |
| touchStartThreshold | Number | touchStartThreshold="5" | 鼠标移动多少像素才能开始拖拽元素 |
| disabled | Boolean | disabled="true" | 是否启用拖拽组件 |
| animation | Number | animation="1000" | 单位为ms，拖拽时的过渡动画效果 |
| handle | Selector | handle=".card-title" | 拖拽手柄，只有当鼠标移动到选择器对应的元素上时才能进行拖拽 |
| filter | Selector | filter=".unmover" | 通过选择器设置哪些样式的元素不能被拖拽，多个选择器用逗号分隔 |
| preventOnFilter | Boolean | preventOnFilter="true" | 当拖拽被filter选择器选中的元素时是否触发event.preventDefault()，默认为true |
| draggable | Selector | draggable=".item" | 哪些元素可以进行拖拽 |
| ghostClass | String | ghostClass="ghost-style" | 设置拖拽元素的占位符样式，用于模拟被拖动元素的排序情况，可能需要!important才能生效 |
| chosenClass | String | chosenClass="chosen-style" | 设置目标被选中时的样式，包括拖拽时鼠标附着的样式，可能需要!important才能生效 |
| dragClass | String | dragClass="drag-style" | 拖拽元素过程中添加的样式，可能需要!important才能生效 |
| dataIdAttr | Selector | dataIdAttr="data-id" | 不太清楚的属性 |
| forceFallback | Boolean | forceFallback="true" | 当设置为true时将不使用原生的HTML5拖放，可以修改拖放过程中的样式 |
| fallbackClass | String | fallbackClass="dragging-style" | 当forceFallback设置为true时，克隆出新的DOM元素的类名，可以修改拖放过程中鼠标附着的样式 |
| fallbackOnBody | Boolean | fallbackOnBody="true" | 当设置为true时，克隆的元素会被添加到文档的body中 |
| fallbackTolerance | Number | fallbackTolerance="10" | 拖拽之前应该移动的距离 |
| scroll | Boolean | scroll="true" | 当排序容器是可滚动区域时，拖放是否引起区域滚动 |
| scrollFn | Function | scrollFn="handleScroll" | 滚动回调函数，用于自定义滚动条的适配 |
| scrollSensitivity | Number | scrollSensitivity="30" | 鼠标离滚动区域多远开始滚动 |
| scrollSpeed | Number | scrollSpeed="10" | 滚动速度 |
————————————————
事件
| 参数 | 说明 | 回调参数 |
|---|---|---|
| start | 开始拖动时 | function({ to, from, item, clone, oldIndex, newIndex }) |
| add | 往列表中移入（添加）单元时 | function({ to, from, item, clone, oldIndex, newIndex }) |
| remove | 单元被移动到另一个列表（从当前的列表移处）时 | function({ to, from, item, clone, oldIndex, newIndex }) |
| update | 排序发生变化时 | function({ to, from, item, clone, oldIndex, newIndex }) |
| end | 拖拽结束时 | function({ to, from, item, clone, oldIndex, newIndex }) |
| choose | 选择单元格时 | function({ to, from, item, clone, oldIndex, newIndex }) |
| sort | 排序发生变化时 | function({ to, from, item, clone, oldIndex, newIndex }) |
| filter | 尝试选择一个被 filter 过滤的单元时 | function({ to, from, item, clone, oldIndex, newIndex }) |
| clone | clone 复制出单元格时触发 | function({ to, from, item, clone, oldIndex, newIndex }) |
最佳实践
<transition>
<draggable
:delay="300"
:fallback-tolerance="0"
:list="dragList"
:force-fallback="true"
fallback-class="dragging_style"
handle=".card-title"
drag-class="drag-style"
ghost-class="ghost-style"
chosen-class="chosen-style"
@update="handleUpdateDrag"
class="home-drag-wrapper">
<div v-for=" item in dragList" :key="item.id" :class="item.className" class="home-part">
<component :is="item.name" :ref="item.name" class="drag-handle " :class=" item.id !== 1? (item.id !== 2? 'card': ''):''"> </component>
</div>
</draggable>
</transition>
.ghost-style {
opacity: 0;
cursor: grabbing !important;
}
.chosen-style {
background-color: rgba(242, 245, 250, .5);
border-radius: 8px;
z-index: 1000;
box-shadow: 0px 3px 28px #BAC4D4;
cursor: grabbing !important;
}
.dragging-style {
border: 1px solid yellow;
}
.drag-style {
background-color: rgba(242, 245, 250, .5);
border-radius: 8px;
z-index: 1000;
box-shadow: 0px 3px 28px #BAC4D4;
opacity: 1 !important;
}
ghost-class 为排序中的占位样式。
chosen-class 占位符、拖动过程中鼠标附着的副本样式的共同样式。
设置 :force-fallback=“true” 可修改拖放过程中的样式
fallback-class 设置鼠标附着的副本样式， 通过 !important 提升样式优先级。
drag-class 拖拽过程中的样式（鼠标附着样式 opacity: 1 !important; 设置副本的透明度）。
