拖放排序插件Sortable.js

时间 2019-11-06

标签拖放排序插件 sortable.js sortable 栏目 JavaScript 繁體版

原文原文链接

介绍

Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，可是功能很强大）
下载地址：https://github.com/RubaXa/Sor...
官方DEMO：http://rubaxa.github.io/Sorta...css

特色

支持触屏设备和大部分浏览器（IE9如下的就不支持了，缘由都懂得）
能够从一个列表容器中拖拽一个列表单元到其余容器或本列表容器中进行排序
移动列表单元时有css动画
支持拖放操做和可选择的文本（这句我也没理解，大概意思就是对原生的拖放进行拓展了）
很是友善的滚动效果
基于原生HTML5中的拖放API
支持多种框架（angular、vue、react等）
支持全部的css框架，像Bootstrap
简单的API，方便使用
CDN
不依赖jQuery

安装

npm安装html

$ npm install sortablejs --save

bower安装vue

$ bower install --save sortablejs

固然还有直接引入html5

<script src="../../js/Sortable.min.js"></script>

使用

<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

能够经过Sorable对象中的create方法建立react

var el = document.getElementById('items');
var sortable = Sortable.create(el,{});

也能够经过新建个Sortable对象来建立git

var sortable = new Sortable(el, {})

实例中dom结构中用到的是ul（无序列表），固然也能够用其余的元素来构造例如使用div等github

配置项

先把他的总体配置写出来，在一个个介绍npm

var sortable = new Sortable(el, {
    group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
    sort: true,  // sorting inside list
    delay: 0, // time in milliseconds to define when the sorting should start
    disabled: false, // Disables the sortable if set to true.
    store: null,  // @see Store
    animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
    handle: ".my-handle",  // Drag handle selector within list items
    filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
    draggable: ".item",  // Specifies which items inside the element should be draggable
    ghostClass: "sortable-ghost",  // Class name for the drop placeholder
    chosenClass: "sortable-chosen",  // Class name for the chosen item
    dragClass: "sortable-drag",  // Class name for the dragging item
    dataIdAttr: 'data-id',

    forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in

    fallbackClass: "sortable-fallback",  // Class name for the cloned DOM Element when using forceFallback
    fallbackOnBody: false,  // Appends the cloned DOM Element into the Document's Body
    fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.        

    scroll: true, // or HTMLElement
    scrollFn: function(offsetX, offsetY, originalEvent) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
    scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
    scrollSpeed: 10, // px

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

    // Element is chosen
    onChoose: function (/**Event*/evt) {
        evt.oldIndex;  // element index within parent
    },

    // Element dragging started
    onStart: function (/**Event*/evt) {
        evt.oldIndex;  // element index within parent
    },

    // Element dragging ended
    onEnd: function (/**Event*/evt) {
        evt.oldIndex;  // element's old index within parent
        evt.newIndex;  // element's new index within parent
    },

    // Element is dropped into the list from another list
    onAdd: function (/**Event*/evt) {
        var itemEl = evt.item;  // dragged HTMLElement
        evt.from;  // previous list
        // + indexes from onEnd
    },

    // Changed sorting within list
    onUpdate: function (/**Event*/evt) {
        var itemEl = evt.item;  // dragged HTMLElement
        // + indexes from onEnd
    },

    // Called by any change to the list (add / update / remove)
    onSort: function (/**Event*/evt) {
        // same properties as onUpdate
    },

    // Element is removed from the list into another list
    onRemove: function (/**Event*/evt) {
        // same properties as onUpdate
    },

    // Attempt to drag a filtered element
    onFilter: function (/**Event*/evt) {
        var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
    },

    // Event when you move an item in the list or between lists
    onMove: function (/**Event*/evt, /**Event*/originalEvent) {
        // Example: http://jsbin.com/tuyafe/1/edit?js,output
        evt.dragged; // dragged HTMLElement
        evt.draggedRect; // TextRectangle {left, top, right и bottom}
        evt.related; // HTMLElement on which have guided
        evt.relatedRect; // TextRectangle
        originalEvent.clientY; // mouse position
        // return false; — for cancel
    },

    // Called when creating a clone of element
    onClone: function (/**Event*/evt) {
        var origEl = evt.item;
        var cloneEl = evt.clone;
    }
});

属性：数组

group：string or object浏览器

string：命名，我的建议用元素id就行,用处是为了设置能够拖放容器时使用，在array中的put的设置中再作介绍；
       object：{name,pull,put}
               name：同string的方法，
               pull：pull用来定义从这个列表容器移动出去的设置，true/false/'clone'/function
                   true:列表容器内的列表单元能够被移出；
                   false：列表容器内的列表单元不能够被移出；
                   'clone'：列表单元移出，移动的为该元素的副本；
                   function：用来进行pull的函数判断，能够进行复杂逻辑，在函数中return false/true来判断是否移出；
               put：put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function
                   true:列表容器能够从其余列表容器内放入列表单元；
                   false：与true相反；
                   ['foo','bar']：这个能够是一个字符串或者是字符串的数组，表明的是group配置项里定义的name值；
                   function：用来进行put的函数判断，能够进行复杂逻辑，在函数中return false/true来判断是否放入；

sort：boolean 定义是否列表单元是否能够在列表容器内进行拖拽排序；
delay：number 定义鼠标选中列表单元能够开始拖动的延迟时间；
disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为能够进行排序，至关于一个开关；
animation：number 单位：ms，定义排序动画的时间；
handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；
filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；
draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元能够进行拖放
ghostClass：selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本做为影子单元来模拟被拖动单元排序的状况，此配置项就是来给这个影子单元添加一个class，咱们能够经过这种方式来给影子元素进行编辑样式；
chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增长一个class；
forceFallback：boolean 若是设置为true时，将不使用原生的html5的拖放，能够修改一些拖放中元素的样式等；
fallbackClass：string 当forceFallback设置为true时，拖放过程当中鼠标附着单元的样式；
scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放能够引发区域滚动

事件：

onChoose：function 列表单元被选中的回调函数
onStart：function 列表单元拖动开始的回调函数
onEnd：function 列表单元拖放结束后的回调函数
onAdd：function 列表单元添加到本列表容器的回调函数
onUpdate：function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove：function 列表元素移到另外一个列表容器的回调函数
onFilter：function 试图选中一个被filter过滤的列表单元的回调函数
onMove：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone：function 当建立一个列表单元副本的时候的回调函数

事件对象：
事件对象在各个函数中略有不一样，可经过输出对象查看对象的属性，下面简单列举几个：

to：HTMLElement--移动到列表容器
from：HTMLElement--来源的列表容器
item：HTMLElement--被移动的列表单元
clone：HTMLElement--副本的列表单元
oldIndex：number/undefined--在列表容器中的原序号
newIndex：number/undefined--在列表容器中的新序号

方法

option(name[,value])
得到或者设置项参数，使用方法相似于jQuery用法，没有第二个参数为得到option中第一个参数所对应的值，有第二个参数时，将从新赋给第一个参数所对应的值；
closest
没理解
toArray()
序列化可排序的列表单元的data-id（可经过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中
sort()
经过自定义列表单元的data-id的数组对列表单元进行排序
save()
destroy()

有问题加我qq吧，这个评论翻着不是很好找，635905156