这一篇我来分享一下拖动排序插件Sortable.js这是一款小型的支持手机端排序功能的插件。非常好用。
首先要引入文件
- <script src="Sortable.js"></script>
接下来我们需要一个列表例如这样
- <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);
- new Sortable(el, {
- group: "name",
- store: null, // @see Store
- handle: ".my-handle", // 点击目标元素约束开始
- draggable: ".item", // 指定那些选项需要排序
- ghostClass: "sortable-ghost",
- onStart: function (/**Event*/evt) { // 拖拽
- var itemEl = evt.item;
- },
- onEnd: function (/**Event*/evt) { // 拖拽
- var itemEl = evt.item;
- },
- onAdd: function (/**Event*/evt){
- var itemEl = evt.item;
- },
- onUpdate: function (/**Event*/evt){
- var itemEl = evt.item; // 当前拖拽的html元素
- },
- onRemove: function (/**Event*/evt){
- var itemEl = evt.item;
- }
- });
如果你需要获得排序后的数据可以用下面的方法
- 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('|'));
- }
- }
- })
需要注意的是:
toArray():String[]
把需要排序的选项序列化成字符数组
sort(order:String[])
通过数组排序元素
var order = sortable.toArray();
sortable.sort(order.reverse()); // apply
destroy()
保存与恢复排序
下面是我项目中应用的代码:
- // 排序功能
- var app = document.getElementById('kuang');
- var sort = Sortable.create(app, {
- group: "bowen",
- handle: ".toolbar",
- filter: '.del_bar',
- onFilter: function (evt) {
- jQuery('.cover').show('500');
- jQuery('.cover .left').unbind('click');
- jQuery('.cover .left').click(function() {
- jQuery('.cover').hide('200');
- });
- jQuery('.cover .right').unbind('click');
- jQuery('.cover .right').click(function() {
- var pd = jQuery('input[name=picsort]').val().split(',');
- if (pd.length == 2) {
- alert('最后一张无法删除');
- return false;
- };
- var delpic = evt.item.parentNode.parentNode.getAttribute("data-id");
- var id = jQuery('.pid').val();
- jQuery.ajax({
- url: './source/blog/delpic.php',
- type: 'POST',
- data: {delpic:delpic},
- success:function(data){
- }
- })
- evt.item.parentNode.parentNode.parentNode.removeChild(evt.item.parentNode.parentNode);
- var sorts = '';
- jQuery('#kuang li').each(function(index, el) {
- sorts += ','+jQuery(this).attr('data-id');
- });
- var id = jQuery('.pid').val();
- jQuery.ajax({
- url: './source/blog/delsorts.php',
- type: 'POST',
- dataType: 'json',
- data: {newsort: sorts,id:id},
- success:function(data){
- }
- })
- jQuery('.cover').hide('1000');
- var timer = setTimeout('window.location.reload()',3000);
- });
- },
- store: {
- get: function (sortable) {
- var order = localStorage.getItem(sortable.options.group);
- // return order ? order.split('|') : [];
- },
- set: function (sortable) {
- var order = sortable.toArray();
- localStorage.setItem(sortable.options.group, order.join('|'));
- var id = jQuery('.pid').val();
- jQuery.ajax({
- url: './source/blog/changesorts.php',
- type: 'POST',
- dataType: 'json',
- data: {newsort: order,id:id},
- })
- }
- },
- onUpdate: function(evt){
- var item = evt.item;
- }
- })
- sort.destroy();
下面是html代码
- <ul data-role="listview" data-inset="true" id="kuang">
- <!--{loop $piclist $v}-->
- <li class="bar" data-id="$v['picid']" style="position:relative;">
- <div class="move" style="overflow:hidden;">
- <div style="width: 875px;" class="leftside">
- <a href="http://bbs.photofans.cn/blog.php?mod=edit_mob&picid=$v['picid']" data-ajax="false">
- <img src="http://www.fansimg.com/$v['uploader']_s/$v['imagename']" alt="" style="height:50px;width:50px;margin-left:10px;display:block;float:left;" class="toolbar">
- </a>
- <div id="infor" style="font-size:12px;float:left;margin-left:10px;height:50px;width:20%;white-space:pre-wrap;">
- <div class="infor_up" style="position:absolute;top:0px;height:15px;overflow:hidden;">$v['txt1']</div>
- <div class="infor_down" style="position:absolute;bottom:0px;height:15px;overflow:hidden;">$v['txt2']</div>
- </div>
- <input name="picid" class="picid" value="$v['picid']" type="hidden">
- </div>
- </div>
- <div class="button_scroll">
- <a href="http://bbs.photofans.cn/blog.php?mod=edit_mob&picid=$v['picid']" class="edit_bar" data-ajax="false"><span class="icon iconfont"></span></a>
- <span class="del_bar icon iconfont"></span>
- <span class="toolbar" style="line-height:54.9px;height:24px;width:30px;display:block;background:url(./template/default/blog/images/zhuadian.png) no-repeat scroll center center;background-size:20px 20px;padding-top:54px;position:absolute;top:0px;left:116px;"></span>
- </div>
- </li>
- <!--{/loop}-->
- </ul>
因为页面中用到了jquery mobile框架,所以排序的列表我用的是listview。
应该注意的是,这个插件如果和uploadifive一起用的话,应该放在uploadifive js代码的下方,如果放在上面,上传功能是不会起作用的。排序插件还支持删除功能,设置filter为触点class值,就可以点击删除了。怎么样功能还是很强大的吧。
好了就到这里。