jQuery可排序列表和固定/锁定项目 [英] JQuery sortable lists and fixed/locked items

问题描述

是否可以通过将JItem可排序列表中的列表项锁定在列表中的特定位置的方式来锁定这些项目.

例如

将此伪列表与锁定的项目一起考虑...

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:

概述

具有fixed功能的

jQuery.Ui.sortable 小部件扩展.此功能允许用户修复列表中的元素.
使用.fixedsortable()构造函数，您可以构造一个扩展了功能的.sortable()类.您还可以使用原始方法和扩展方法.

代码

https://gist.github.com/3758329#file_fixedsortable.js > fixedsortable.js

示例

http://jsfiddle.net/omnosis/jQkdb/

用法

常规:

要使用，请将fixed属性添加到可排序列表选项中:

$("#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个小时的工作:(我疯了.

Is it possible to lock list items in JQuery sortable list in a way that those items will stay in that particular place in the list.

For example,

consider this pseudo list with locked items...

item A
item B(locked)
item C(locked)
item D
item E
item F
item G(locked)

So, I'd like to have the items B,C and G to be fixed in a way that if user drag and drop item D at the start of the list, the item A "jumps" over fixed/locked items B and C with following results...

item D
item B(locked)
item C(locked)
item A
item E
item F
item G(locked)

I've been searching for something like this without luck. Is it possible..?

解决方案

I extended the jQuery.Ui.sortable:

Overview

jQuery.Ui.sortable widget extension with fixed feature. This feature allows user to fix elements in the list.
With the .fixedsortable() constructor you construct a .sortable() class which extended with the features. You can use the original methods and the extended as well.

Code

https://gist.github.com/3758329#file_fixedsortable.js > fixedsortable.js

Example

http://jsfiddle.net/omnosis/jQkdb/

Usage

General:

To use, add the fixed property to the sortable list optios:

$("#list").fixedsortable({
   fixed: (value)
})

the value can be:

• integer example: 3
• array of integers example : [1,2,5]
• a html element or a list of html elements
• a css selector
• jquery object

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
    })
});

Notes:

If you insist to use the .sortable instead of .fixedsortable you can use this https://gist.github.com/3758329#file_sortable.js instead of the jquery.ui library. This is a complete replacement of the jQuery.ui, but i don't recommend to use this because of later updates.

i have been working on this more than 12 hours :( i am insane..

这篇关于jQuery可排序列表和固定/锁定项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！