龙空技术网

不用jQuery也能拖拽排序的新Get:SortableJs

豆妙时光 183

前言:

目前你们对“jquery排行文章列表排序”都比较看重,咱们都需要了解一些“jquery排行文章列表排序”的相关内容。那么小编同时在网上搜集了一些对于“jquery排行文章列表排序””的相关知识,希望朋友们能喜欢,咱们一起来了解一下吧!

做一个移动端的管理后台,拖拽方式的排序、分类、删除等操作方式,是必不可少的吧,毕竟这样比较直观和易操作。就如下图所示一下:

拖拽时有CSS动画哟

可以跨列表区域来拖放排序哟

这2个图片,一是展示了拖拽也可以更炫,二是拖拽可以在2个不同的LIST之间,就是拖拽分类的场景应用。

基于这种方式比较常用,那么怎么实现的呢?我给大家推荐一个js库:Sortable.js

那么什么是Sortable.js呢?

它是为了现代浏览器和移动端(Android、IOS),实现拖放重新排序功能而开发的一个js库。它不依赖jQuery,支持很多与其它js库的无缝衔接,比如:Meteor、AngularJS、React、Polymer、Knockout、BootStrap等等。

那么它有哪些特点?

支持移动端和所有现代浏览器(包括IE9+)。

可以从一个列表拖拽到另一个列表中,就如上边的GIF图演示的那样。代码实现如下:

Sortable.create(foo, {group:'shared'});

Sortable.create(bar, {group:'shared'});

拖拽移动时,可以配置CSS动画(如上图GIF)。代码配置如下:

Sortable.create(users, {animation:200});

支持句柄拖动和可选文字拖动,机智的自动滚动条(条目很多的时候)。

内置了原生HTML5的拖放(drap/drop)API。

那么如何使用它呢?

你可以到github上搜索:Sortable,下载Sortable.js,引用到页面中,接着如下图使用方式:

配置项很多,这里就不一一列举了

详细的配置信息,你可以到github上查阅。

通过上边的简单介绍,是否可以满足你的需求?有什么问题,欢迎评论,我们共同探讨。

至此,就简单的介绍完了,你的每次点赞和转发和收藏,都是给我们莫大的动力和支持!

标签: #jquery排行文章列表排序