当前位置:主页 > JavsScript库 > 拖放 >

带有原生HTML5拖放功能的轻量级JS排序库 – SortableJS
栏目分类:拖放   发布日期:2021-09-07   浏览次数:

Sortable 是一个简单但完全可定制的 javascript 可拖动库,它使用原生 Html5 拖放 API 使项目列表可排序/重新排序。适用于所有现代浏览器和触摸设备。

安装:

# NPM
$ npm install sortablejs --save

使用:

1. 导入SortableJS。

import Sortable from 'sortablejs';
 
// 或
<script src="Sortable.min.js"></script>

2. 在页面上创建一个可拖动项目列表。

<ul id="example">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
  <li>项目 5</li>
  <li>项目 6</li>
  <li>项目 7</li>
  <li>项目 8</li>
</ul>

3. 启用列表上的可拖动和可排序功能。

new Sortable(document.getElementById('example'), {
    // 这里的选项
});

4. 所有可能的选项都有默认值。

new Sortable(el, {
 
    // name: String — 组名
    // pull: true|false|["foo", "bar"]|'clone'|function — ability to move from the list. clone — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to true.
    // put: true|false|["baz", "qux"]|function — whether elements can be added from other lists, or an array of group names from which elements can be added.
    // revertClone: boolean — revert cloned element to initial position after moving to a another list.
    group: "name",  // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
 
    // 启用排序
    sort: true,  
 
    // 排序开始前的等待时间
    delay: 0
 
    // 启用触摸延迟
    delayOnTouchOnly: false,
 
    // 在取消延迟拖动事件之前该点应移动多少像素
    touchStartThreshold: 0, 
 
    // 如果设置为 true ,则禁用可排序。
    disabled: false, 
 
    // 元素内的哪些项应该是可拖动的
    draggable: '>*'
 
    // 保存并恢复排序。
    store: null,
 
    // 动画速度
    animation: 0,
 
    // easing function: "cubic-bezier(1, 0, 0, 1)"
    easing: null, 
 
    // 拖动手柄
    handle: ".my-handle",
 
    // 要忽略的元素
    ignore: 'a, img',
 
    // 过滤选择器
    filter: ".ignore-elements", 
 
    // 过滤时
    preventOnFilter: true,
 
    // 丢弃占位符
    ghostClass: "sortable-ghost",
 
    // 选择的类
    chosenClass: "sortable-chosen",
 
    // 拖动类
    dragClass: "sortable-drag",
 
    // 默认数据属性
    dataIdAttr: 'data-id',
 
    // 启用放置气泡
    dropBubble: false,
 
    // 交换区阈值
    swapThreshold: 1,
 
    // 反转交换
    invertSwap: false,
 
    // 倒置交换区的阈值
    invertedSwapThreshold: 1,
 
    // 如果没有给出方向,将被自动检测
    direction: 'horizontal',
 
    // 忽略 HTML5 DnD 行为
    forceFallback: false,
 
    // fallback class
    fallbackClass: "sortable-fallback",
 
    // 将克隆的 DOM 元素附加到文档正文
    fallbackOnBody: false,  
 
    // 鼠标在被认为是拖动之前应该移动多远。
    fallbackTolerance: 0, 
 
    // 回退偏移量
    fallbackOffset: {
        x: 0,
        y: 0
    },
 
    dragoverBubble: false,
 
    // 删除不显示的克隆元素
    removeCloneOnHide: true, 
 
    // 鼠标距离必须是空的 sortable 才能插入拖动元素
    emptyInsertThreshold: 5, // px, 
 
    // 设置数据
    setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
      dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
    },
 
    // 滚动插件选项
 
    // 启用插件。可以是 HTMLElement。
    scroll: true, 
 
    // 如果您有自定义滚动条 scrollFn 可用于自动滚动
    scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, 
 
    // px, 鼠标必须离边缘多近开始滚动。
    scrollSensitivity: 30, 
 
    // 强制自动滚动回退
    forceAutoScrollFallback: false,
 
    // px, 滚动速度
    scrollSpeed: 10, 
 
    // 将自动滚动应用到所有父元素,以便更容易移动
    bubbleScroll: true,
 
    // OnSpill 插件选项
 
    // 启用插件
    revertOnSpill: true, 
    // 溢出时调用
    onSpill: function(/**Event*/evt) {
      evt.item // 溢出的 item
    },
 
    // MultiDrag Plugin options
 
    //启用插件
    multiDrag: true, 
 
    // 类名对于选定的项目
    selectedClass: "sortable-selected", 
 
    //要选择的项目必须按下的键
    multiDragKey: null, 
 
    //选择项目时调用
    onSelect: function(/**Event*/evt) {
      evt.item // 选定的项目
    },
 
    // 调用当取消选择项目时
    onDeselect: function(/**Event*/evt) {
      evt.item // 取消选择的项目
    },
 
    // 交换插件选项
 
    // 启用交换模式
    swap: true, 
 
    // 交换项目的类名 (如果启用了交换模式)
    swapClass: "sortable-swap-highlight",
     
});

回调函数。

new Sortable(el, {
 
    // 元素被选中
    onChoose: function (/**Event*/evt) {
      evt.oldIndex;  // 父元素内的元素索引
    },
 
    // 元素未被选中
    onUnchoose: function(/**Event*/evt) {
      // 与 onEnd 属性相同
    },
 
    // 元素拖动开始
    onStart: function (/**Event*/evt) {
      evt.oldIndex;  // 父元素内的元素索引
    },
 
    // 元素拖动结束
    onEnd: function (/**Event*/evt) {
      var itemEl = evt.item;  // 拖拽的 HTMLElement
      evt.to;    // 目标列表
      evt.from;  // 上一个列表
      evt.oldIndex;  // 元素在旧父元素中的旧索引
      evt.newIndex;  // 元素在新父元素中的新索引
      evt.clone // 克隆元素
      evt.pullMode;  // 当 item 在另一个 sortable 中时:`"clone"` if cloning, `true` if
    },
 
    // 元素从另一个列表放入列表
    onAdd: function (/**Event*/evt) {
      // 与 onEnd 相同的属性
    },
 
    // 在列表中更改排序
    onUpdate: function (/**Event*/evt) {
      // 与 onEnd 相同的属性
    },
 
    // 通过对列表的任何更改(添加/更新/删除)
    onSort: function (/**Event*/evt) {
      // 与 onEnd 相同的属性
    },
 
    // 元素从列表中移除到另一个列表中
    onRemove: function (/**Event*/evt) {
      // 与 onEnd 相同的属性
    },
 
    // 尝试拖动过滤后的元素
    onFilter: function (/**Event*/evt) {
      var itemEl = evt.item;  // HTMLElement 接收`mousedown|tapstart` 事件。
    },
 
    // 在列表中或列表之间移动项目时的
    onMove: function (/**Event*/evt, /**Event*/originalEvent) {
      // Example: https://jsbin.com/nawahef/edit?js,output
      evt.dragged; // 拖拽的 HTMLElement
      evt.draggedRect; // DOMRect {left, top, right, bottom}
      evt.related; // HTMLElement 已经引导
      evt.relatedRect; // DOMRect
      evt.willInsertAfter; // Boolean 如果 Sortable 默认会在目标之后插入拖动元素,则为 true
      originalEvent.clientY; // 鼠标位置
      // return false; — 取消
      // return -1; — 在目标之前插入
      // return 1; — 在目标之后插入
    },
 
    // 在创建元素的克隆时调用
    onClone: function (/**Event*/evt) {
      var origEl = evt.item;
      var cloneEl = evt.clone;
    },
 
    // 当拖动元素改变位置时调用
    onChange: function(/**Event*/evt) {
      evt.newIndex // 最有可能使用此事件的原因是获取拖动元素的当前索引
      // 与 onEnd 属性相同
    }
 
});

官方网站:https://github.com/SortableJS/Sortable

相关热词: SortableJS拖放功能

下一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库