引见
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 install sortablejs --savebower装置
$ bower install --save sortablejs固然另有直接引入
<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要领建立
var el = document.getElementById('items');
var sortable = Sortable.create(el,{});也能够经由过程新建个Sortable对象来建立
var sortable = new Sortable(el, {})实例中dom组织中用到的是ul（无序列表），固然也能够用其他的元夙来组织比方运用div等
设置项
先把他的团体设置写出来，在一个个引见
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
