首页 > 代码库 > no-jQuery 列表<li>排序插件 -- Sortable.js
no-jQuery 列表<li>排序插件 -- Sortable.js
项目里用到这个列表排序插件,比较好用,不依赖jQuery,另源码也有很多可借鉴的地方,故推荐给大家试试。
官方网站: http://rubaxa.github.io/Sortable/
Sortable
Features
- Support touch devices and modern browsers
- Built using native HTML5 drag and drop API
- Simple API
- Lightweight, 2KB gzipped
- No jQuery
Usage
<ul id="items"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
```js var el = document.getElementById(‘items‘); new Sortable(el);
Options
new Sortable(el, { group: "name", store: null, // @see Store handle: ".my-handle", // Restricts sort start click/touch to the specified element draggable: ".item", // Specifies which items inside the element should be sortable ghostClass: "sortable-ghost", onStart: function (/**Event*/evt) { // dragging var itemEl = evt.item; }, onEnd: function (/**Event*/evt) { // dragging var itemEl = evt.item; }, onAdd: function (/**Event*/evt){ var itemEl = evt.item; }, onUpdate: function (/**Event*/evt){ var itemEl = evt.item; // the current dragged HTMLElement }, onRemove: function (/**Event*/evt){ var itemEl = evt.item; } });
Method
toArray():String[]
Serializes the sortable‘s item data-id‘s into an array of string.
sort(order:Array
)
Sorts the elements according to the array.
var order = sortable.toArray(); sortable.sort(order.reverse()); // apply
destroy()
Store
Saving and restoring of the sort.
new Sortable(el, { group: "localStorage-example", store: { /** * Get the order of elements. Called once during initialization. * @param {Sortable} sortable * @retruns {Array} */ get: function (sortable) { var order = localStorage.getItem(sortable.options.group); return order ? order.split(‘|‘) : []; }, /** * Save the order of elements. Called every time at the drag end. * @param {Sortable} sortable */ set: function (sortable) { var order = sortable.toArray(); localStorage.setItem(sortable.options.group, order.join(‘|‘)); } } })
Sortable.utils
- on(el
:HTMLElement
, event:String
, fn:Function
) — attach an event handler function - off(el
:HTMLElement
, event:String
, fn:Function
) — remove an event handler - css(el
:HTMLElement
):Object
— get the values of all the CSS properties - css(el
:HTMLElement
, prop:String
):Mixed
— get the value of style properties - css(el
:HTMLElement
, prop:String
, value:String
) — set one CSS properties - css(el
:HTMLElement
, props:Object
) — set more CSS properties - find(ctx
:HTMLElement
, tagName:String
[, iterator:Function
]):Array
— get elements by tag name - bind(ctx
:Mixed
, fn:Function
):Function
— Takes a function and returns a new one that will always have a particular context - closest(el
:HTMLElement
, selector:String
[, ctx:HTMLElement
]):HTMLElement|Null
— for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree - toggleClass(el
:HTMLElement
, name:String
, state:Boolean
) — add or remove one classes from each element
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。