jquery-sortablejs

jquery-sortablejs是一个实现页面元素拖拽的jquery插件。她衍生自Sortable.js，因此在依赖于jQuery的同时她也需要Sortable.js的支持。通过jquery-sortablejs你可以使用我们熟悉的jquery语法对页面上的任何元素实现拖拽交互❤️

Sortable.js本身可以单独进行使用，其本身并不依赖任何第三方库，jquery-sortablejs是为了满足广大jQuery用户对于$符号的青睐。

DEMO

常用参数：

{
    group: "name",  // 组名称可以为字符串也可以是一个对象设置更加具体的相关属性如：pull，put
    sort: true,  // 启用排序
    delay: 0, // 延迟，单位（毫秒）
    disabled: false, // Disables the sortable if set to true.
    animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
    easing: "cubic-bezier(1, 0, 0, 1)", //执行动画的贝塞尔曲线(缓动动画)
  draggable: ".item",  // 设置哪些元素可以拖拽
    handle: ".my-handle",  // 从哪个元素实现拖拽 
    filter: ".ignore-elements",  // 过滤可拖拽元素选择器
    preventOnFilter: true, // 触发`filter`时调用`event.preventDefault（）`
    ghostClass: "sortable-ghost",  // 拖拽时占位元素的class
    chosenClass: "sortable-chosen",  // 所选项目的class
    dragClass: "sortable-drag",  // 拖动项的class
    swapThreshold: 1, // 交换区阀值 0-1
    invertSwap: false, // 始终反向交换区域
    invertedSwapThreshold: 1, // 反转交换区域的阈值（默认设置为swapThreshold值）
    direction: 'horizontal', // 可排序方向（如果没有给出，将自动检测）
    forceFallback: false,  // 忽略HTML5拖拽事件DND（Drag-and-Drag）并强制回退
    fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名
    fallbackOnBody: false,  // 将克隆的DOM元素追加到Document的Body中
    fallbackTolerance: 0, // 以像素为单位指定鼠标在被视为拖动之前应移动多远。
    removeCloneOnHide: true //在没有显示时删除克隆元素，而不是仅仅隐藏它
}

详情查看官方文档