是否可能锁定列表项目在JQuery可排序列表中的方式,这些项目将保留在列表中的特定位置。
例如,
考虑这个带有锁定项目的伪列表…
item A item B(locked) item C(locked) item D item E item F item G(locked)
所以,我想要固定项目B,C和G,使得如果用户在列表的开始处拖放项目D,项目A“跳过”固定/锁定项目B和C有以下结果…
item D item B(locked) item C(locked) item A item E item F item G(locked)
我一直在寻找这样的东西没有运气。可能吗..?
解决方法
我扩展了jQuery.Ui.sortable:
概述
jQuery.Ui.sortable
小部件扩展具有固定功能。此功能允许用户修复列表中的元素。
使用.fixedsortable()构造函数构造一个使用特性扩展的.sortable()类。您可以使用原始方法和扩展。
码
https://gist.github.com/3758329#file_fixedsortable.js> fixedsortable.js
例
http://jsfiddle.net/omnosis/jQkdb/
一般:
$("#list").fixedsortable({ fixed: (value) })
该值可以是:
>整数示例:3
>整数数组示例:[1,2,5]
>一个html元素或一个html元素的列表
>一个css选择器
> jquery对象
HTML:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> //the jquery <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> //the original jquery-ui <script type="text/javascript" src="https://raw.github.com/gist/3758329/91749ff63cbc5056264389588a8ab64238484d74/fixedsortable.js"></script> //the extended sortable ... <ul id="sortable1"> <li>oranges</li> <li class="static">apples</li> <li>bananas</li> <li>pineapples</li> <li>grapes</li> <li class="static">pears</li> <li>mango</li> </ul> <ul id="sortable2"> <li>bananas</li> <li foo="asd">oranges</li> <li foo="dsa">apples</li> <li>pineapples</li> <li>grapes</li> <li>pears</li> <li>mango</li> </ul> <ul id="sortable3"> <li>bananas</li> <li>oranges</li> <li>apples</li> <li>pineapples</li> <li>grapes</li> <li>pears</li> <li>mango</li> </ul>
Javascript
$(function() { $("#sortable1").fixedsortable({ fixed: "> .static" }); $("#sortable2").fixedsortable({ fixed: $("li[foo]").css("background","red") }); $("#sortable3").fixedsortable({ fixed: 2 }) });
笔记:
如果你坚持使用.sortable而不是.fixedsortable,你可以使用这个https://gist.github.com/3758329#file_sortable.js而不是jquery.ui库。这是一个完全替换的jQuery.ui,但我不建议使用这,因为以后的更新。
我一直在这工作超过12小时:(我疯了..