前端

Vue.Draggable

2019-11-11  本文已影响0人  是嘻嘻呀

需求:多个列表中实现拖动
代码:

<div class="groupingMain-item"  v-for="(item, index) in row" :key="index">
 <draggable
  @end="end"
  :id="index"
  :list="item"
  :options="{group:{name: 'people'},chosenClass: 'el-tag--success'}"      
  class="groupingMain-item-tags" >
  ... 
 </draggable>
</div>
import draggable from 'vuedraggable'
end(evt){
  const formRowId = evt.from.id  //原行id
  const toRowId = evt.to.id  //目标行id
  const newIndex = evt.newIndex  //新index
  const oldIndex = evt.oldIndex  //原index
 },

oprions

group: { 
 name: 'draggableList',//将一个元素从一个列表拖动到另一个列表,必须有相同的name
 pull: 'clone', // true|false|'clone'|function|['list1','list2']; 默认为true,clone为复制元素
 put:true, //true| false| array|['list1','list2'] ; 是否可以从其他列表添加元素,或者指定一个数组,可以从此添加元素,默认为true,
 revertClone:true, // 将一个元素移动到另一个列表之后,将克隆的元素还原到初始位置
},
 sort: false, //允许在列表中排序
 delay: 0, //何时开始排序
 delayOnTouchOnly: 0, //使用触摸时的延迟ms
 touchStartThreshold: 0,//取消延迟拖动事件之前,点应该移动多少像素
 disabled: false, // 是否禁用排序
 store: null //
 animation: 150, //排序时的动画ms
 easing: "cubic-bezier(1, 0, 0, 1)", // Easing 动画,默认为空,[easing 动画地址](https://easings.net/)
 handle: ".my-handle",  // 拖动手柄选择器,css选择器
 filter: ".ignore-elements",  // 不允许拖动的选择器,字符串或者函数 css选择器
 preventOnFilter: true, // 在调用event.preventDefault()触发filter`
 draggable: ".item",  //指定元素中哪些项可以拖动,css选择器
 dataIdAttr: 'data-id',

ghostClass: "sortable-ghost",  // 占位符类名,添加样式
chosenClass: "sortable-chosen",  // 所选项目的类名,添加样式
dragClass: "sortable-drag",  // 拖动项目类名,添加样式

swapThreshold: 1, // 交换区域占目标的百分比就可以交换,0-1之间浮动,
invertSwap: false, // 当为true则反向交换区域
invertedSwapThreshold: 1, //反向交换的阈值,默认为swapThreshold的值
direction: 'horizontal', // 可排序的方向,'vertical', 'horizontal'
forceFallback: false,  // 忽略HTML5 DnD行为并强制回退,为true则使用H5浏览器的回退
fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名
fallbackOnBody: false,  // 将克隆的DOM元素追加到文档正文中
fallbackTolerance: 0, // 以像素为单位指定鼠标在被视为拖动之前应移动多远。

dragoverBubble: false, // 为true时dragover冒泡到父排序,适用于回退和本地dragover事件,默认为false,Sortable只会在元素插入父Sortable或可以插入父Sortable后停止冒泡事件。1.8版本后可以设置为false,1.8之前设置为true生效
removeCloneOnHide: true, // 为false时,将克隆的元素隐藏,默认为true,则该隐藏克隆元素时从dom删除此元素
emptyInsertThreshold: 5, // 拖动鼠标时,与空可排序表的距离(px),0为禁用


setData: function (dataTransfer, dragEl) {
   dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
},

//已选择元素
onChoose: function (evt) {
   evt.oldIndex;  // 父级元素中的索引
},

// 元素未选择
onUnchoose: function(/**Event*/evt) {
    // same properties as onEnd
},

// 元素拖动开始
onStart: function (evt) {
   evt.oldIndex;  // element index within parent
},

// 元素拖动结束
onEnd: function (/**Event*/evt) {
   var itemEl = evt.item;  // 元素
   evt.to;    // 目标列表
   evt.from;  //原列表
   evt.oldIndex;  // 旧父级中的旧索引
   evt.newIndex;  // 新父级中的新索引
   evt.oldDraggableIndex; //旧父级中可拖动元素的旧索引
   evt.newDraggableIndex; // 新父级中可拖动元素的新索引
   evt.clone // 克隆
   evt.pullMode;  // 当项在另一个可排序表中时:如果是克隆,则为“克隆”;如果是移动,则为“真”

// 元素从另一个列表中拖放到列表中
onAdd: function (evt) {
   // same properties as onEnd
},

// 更改了列表内的排序
onUpdate: function (evt) {
   // same properties as onEnd
},

// 添加更新删除时都会调用
onSort: function (evt) {
   // same properties as onEnd
},

// 元素从一个列表移动到另一个列表
onRemove: function (evt) {
   // same properties as onEnd
},

// 尝试拖动筛选的元素
onFilter: function (evt) {
   var itemEl = evt.item;  // HTMLElement接收“mousedown”tapstart事件
},

// 在列表中或列表之间移动项目时发生的事件
onMove: function (evt, originalEvent) {
   evt.dragged; // dragged HTMLElement
   evt.draggedRect; //dom矩形(left,top,right,bottom)
   evt.related; // HTMLElement on which have guided
   evt.relatedRect; // DOMRect
   evt.willInsertAfter; // 如果为true则默认在元素之后插入
   originalEvent.clientY; //鼠标位置
   // return false; — for cancel 取消
   // return -1; — insert before target 在之前插入
   // return 1; — insert after target在之后插入
},

// 克隆时调用
onClone: function (evt) {
   var origEl = evt.item;
   var cloneEl = evt.clone;
},

// 当拖动元素更改位置时调用
onChange: function(evt) {
   evt.newIndex // 获取拖动元素的当前索引与onEnd属性相同
}
上一篇 下一篇

猜你喜欢

热点阅读