Sortable.js 是一款轻量级的拖放排序列表的 js 插件(虽然体积小,但是功能很强大)
官方 DEMO:
npm 安装
- $ npm install sortablejs --save
bower 安装
- $ 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;
- }
- });
- string:命名,个人建议用元素id就行,用处是为了设置可以拖放容器时使用,在array中的put的设置中再做介绍;
- array:[name,pull,put]
- name:同string的方法,
- pull:pull用来定义从这个列表容器移动出去的设置,true/false/'clone'/function
- true:列表容器内的列表单元可以被移出;
- false:列表容器内的列表单元不可以被移出;
- 'clone':列表单元移出,移动的为该元素的副本;
- function:用来进行pull的函数判断,可以进行复杂逻辑,在函数中return false/true来判断是否移出;
事件对象在各个函数中略有不同,可通过输出对象查看对象的属性,下面简单列举几个:
未完继续
来源: