8.配置项 

 1 const sortable = new Sortable(el, {
 2     // group: 'name' 用来设置不同列表之间可以拖拉
 3     group: {
 4         name: '...',
 5         pull: [true, false, 'clone', array],
 6         put: [true, false, array]
 7     },
 8     sort: true, // 是否允许内部排序列表
 9     delay: 0, // 定义何时开始排序的时间(以毫秒为单位)
10     delayOnTouchOnly: false, // 只有当用户使用触摸时才会延迟
11     touchStartThreshold: 0, //px, 在取消延迟拖拽事件之前，这个点应该移动多少像素
12     disabled: false,  如果设置为true，将禁用sortable,
13     store: null, 
14     animation: 150, // ms(毫秒)，移动时的动画速度,
15     easing: "cubic-bezier(1, 0, 0, 1)", // 移动的曲线
16     handle: ".my-handle", // 在列表项中拖动手柄选择器,只有元素有这个类才能拖动元素
17     filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数)
18     preventOnFilter: true, // ' filter '触发时调用' event.preventDefault() '
19     draggable: ".item",  // 指定元素中的哪些项应该是可拖动的
20     dataIdAttr: 'data-id', // ' toArray() '方法使用的HTML属性(搞不懂)
21     ghostClass: "sortable-ghost", // 拖放占位符的类名,拖动元素时添加类名
22     chosenClass: "sortable-chosen", // 所选项的类名
23     dragClass: "sortable-drag", // 拖动项的类名
24     swapThreshold: 1, // 交换区阈值(不懂)
25     invertSwap: false, // 如果设置为true，将始终使用反向交换区
26     invertedSwapThreshold: 1, // 反向交换区的阈值(默认设置为swapThreshold值)
27     direction: 'horizontal', // 可排序方向(如果没有给出，将自动检测到)
28     forceFallback: false, // 忽略HTML5的DnD行为并强制执行回退
29     fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆DOM元素的类名
30     fallbackOnBody: false, // 将克隆的DOM元素添加到文档的主体中
31     fallbackTolerance: 0, // 以像素为单位指定鼠标在被认为是拖动之前应该移动多远。(不懂)
32     dragoverBubble: false,
33     removeCloneOnHide: true, // 当克隆元素不显示时删除它，而不是仅仅隐藏它
34     emptyInsertThreshold: 5, //px, 距离鼠标必须从空的可排序元素插入拖动到它
35     
36     setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
37             dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
38     },
39 })

 

posted @ 2022-03-15 17:51  sky-su  阅读(74)  评论(0)    收藏  举报