介绍

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


特点

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

安装

npm安装

$ npm <span class="hljs-keyword">install</span> sortablejs <span class="hljs-comment">--save</span>

bower安装

$ <span class="hljs-keyword">bower </span><span class="hljs-keyword">install </span>--save sortablejs

当然还有直接引入

<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../js/Sortable.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

使用

<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"items"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">li</span>></span>item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">li</span>></span>item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">li</span>></span>item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>

可以通过Sorable对象中的create方法创建

<span class="hljs-attribute">var el</span> = document.getElementById(<span class="hljs-string">'items'</span>);
<span class="hljs-attribute">var sortable</span> = Sortable.create(el,{});

也可以通过新建个Sortable对象来创建

<span class="hljs-keyword">var</span> sortable = <span class="hljs-keyword">new</span> <span class="hljs-type">Sortable</span>(el, {})

实例中dom结构中用到的是ul(无序列表),当然也可以用其他的元素来构造例如使用div等


配置项

先把他的整体配置写出来,在一个个介绍

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

    forceFallback: <span class="hljs-keyword">false</span>,  <span class="hljs-comment">// ignore the HTML5 DnD behaviour and force the fallback to kick in</span>

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

    scroll: <span class="hljs-keyword">true</span>, <span class="hljs-comment">// or HTMLElement</span>
    scrollFn: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(offsetX, offsetY, originalEvent)</span> </span>{ ... }, <span class="hljs-comment">// if you have custom scrollbar scrollFn may be used for autoscrolling</span>
    scrollSensitivity: <span class="hljs-number">30</span>, <span class="hljs-comment">// px, how near the mouse must be to an edge to start scrolling.</span>
    scrollSpeed: <span class="hljs-number">10</span>, <span class="hljs-comment">// px</span>

    setData: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/** DataTransfer */</span>dataTransfer, <span class="hljs-comment">/** HTMLElement*/</span>dragEl)</span> </span>{
        dataTransfer.setData(<span class="hljs-string">'Text'</span>, dragEl.textContent); <span class="hljs-comment">// `dataTransfer` object of HTML5 DragEvent</span>
    },

    <span class="hljs-comment">// Element is chosen</span>
    onChoose: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/**Event*/</span>evt)</span> </span>{
        evt.oldIndex;  <span class="hljs-comment">// element index within parent</span>
    },

    <span class="hljs-comment">// Element dragging started</span>
    onStart: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/**Event*/</span>evt)</span> </span>{
        evt.oldIndex;  <span class="hljs-comment">// element index within parent</span>
    },

    <span class="hljs-comment">// Element dragging ended</span>
    onEnd: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/**Event*/</span>evt)</span> </span>{
        evt.oldIndex;  <span class="hljs-comment">// element's old index within parent</span>
        evt.newIndex;  <span class="hljs-comment">// element's new index within parent</span>
    },

    <span class="hljs-comment">// Element is dropped into the list from another list</span>
    onAdd: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/**Event*/</span>evt)</span> </span>{
        <span class="hljs-keyword">var</span> itemEl = evt.item;  <span class="hljs-comment">// dragged HTMLElement</span>
        evt.from;  <span class="hljs-comment">// previous list</span>
        <span class="hljs-comment">// + indexes from onEnd</span>
    },

    <span class="hljs-comment">// Changed sorting within list</span>
    onUpdate: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/**Event*/</span>evt)</span> </span>{
        <span class="hljs-keyword">var</span> itemEl = evt.item;  <span class="hljs-comment">// dragged HTMLElement</span>
        <span class="hljs-comment">// + indexes from onEnd</span>
    },

    <span class="hljs-comment">// Called by any change to the list (add / update / remove)</span>
    onSort: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/**Event*/</span>evt)</span> </span>{
        <span class="hljs-comment">// same properties as onUpdate</span>
    },

    <span class="hljs-comment">// Element is removed from the list into another list</span>
    onRemove: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/**Event*/</span>evt)</span> </span>{
        <span class="hljs-comment">// same properties as onUpdate</span>
    },

    <span class="hljs-comment">// Attempt to drag a filtered element</span>
    onFilter: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/**Event*/</span>evt)</span> </span>{
        <span class="hljs-keyword">var</span> itemEl = evt.item;  <span class="hljs-comment">// HTMLElement receiving the `mousedown|tapstart` event.</span>
    },

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

    <span class="hljs-comment">// Called when creating a clone of element</span>
    onClone: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-comment">/**Event*/</span>evt)</span> </span>{
        <span class="hljs-keyword">var</span> origEl = evt.item;
        <span class="hljs-keyword">var</span> cloneEl = evt.<span class="hljs-keyword">clone</span>;
    }
});

属性:

  • group:string or array
           <span class="hljs-built_in">string</span>:命名,个人建议用元素id就行,用处是为了设置可以拖放容器时使用,在<span class="hljs-keyword">array</span>中的put的设置中再做介绍;
           <span class="hljs-keyword">array</span>:[name,pull,put]
                   name:同<span class="hljs-built_in">string</span>的方法,
                   pull:pull用来定义从这个列表容器移动出去的设置,<span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>/<span class="hljs-symbol">'clone</span>'/<span class="hljs-keyword">function</span>
                       <span class="hljs-literal">true</span>:列表容器内的列表单元可以被移出;
                       <span class="hljs-literal">false</span>:列表容器内的列表单元不可以被移出;
                       <span class="hljs-symbol">'clone</span>':列表单元移出,移动的为该元素的副本;
                       <span class="hljs-keyword">function</span>:用来进行pull的函数判断,可以进行复杂逻辑,在函数中<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>/<span class="hljs-literal">true</span>来判断是否移出;
                   put:put用来定义往这个列表容器放置列表单元的的设置,<span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>/[<span class="hljs-symbol">'foo</span>',<span class="hljs-symbol">'bar</span>']/<span class="hljs-keyword">function</span>
                       <span class="hljs-literal">true</span>:列表容器可以从其他列表容器内放入列表单元;
                       <span class="hljs-literal">false</span>:与<span class="hljs-literal">true</span>相反;
                       [<span class="hljs-symbol">'foo</span>',<span class="hljs-symbol">'bar</span>']:这个可以是一个字符串或者是字符串的数组,代表的是<span class="hljs-keyword">group</span>配置项里定义的name值;
                       <span class="hljs-keyword">function</span>:用来进行put的函数判断,可以进行复杂逻辑,在函数中<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>/<span class="hljs-literal">true</span>来判断是否放入;
    
  • 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()