在jQuery的可排序列表中排除一个或多个元素(使用connectWith)

Question

我有两个列表,一个ID为"vlist",另一个ID为"hlist"."vlist"包含应该可见的元素,而"hlist"包含应该保持隐藏的项目.这里的想法是允许系统管理员指定应该在注册页面上显示哪些元素/字段,哪些不应该.这两个列表使用"connectWith"连接,因此管理员可以将项目从可见列表拖动到隐藏列表(反之亦然).

我的困境是我想要锁定到可见列表中的一些字段,但仍然可以在该列表中排序.例如,"用户名","电子邮件"和"密码"字段应锁定在可见列表中(因为它们始终需要用于注册).

这甚至可能吗？也许我还没有发现它是一个明智的选择.我已经浏览了jQuery的文档一段时间,似乎无法找到与此场景相关的任何内容.我已经找到了如何"取消"列表中的特定元素完全可以排序,甚至禁止成为可丢弃的目标,但这不能做到.用户仍应能够在"可见"列表中拖动这些项目,以防他们想要调整锁定字段的顺序.我也知道你可以在特定元素或DOM对象中包含可排序元素,但这也不能使用,因为这似乎只适用于整个可排序列表,而不适用于该列表的特定元素.

在构建可排序列表之后,我甚至试图看看这样的东西是否会起作用:

$('#vlist > #slist-li-username').sortable('option', 'containment', '#vlist');

显然,这也没有用,或者我不会发布这个.

如果它可能有所帮助,我想我会抛出我现在使用的代码; 这是jQuery代码:

$(function()
{
$('#vlist, #hlist').sortable
    ({
    connectWith: '.signup-set_flist',
    forcePlaceholderSize: true,
    receive: function (event, ui)
        {
        var itemID = ui.item.attr('id');
        var fID = itemID.replace(/slist-li-/g, '');
        var hID = 'slist-' + fID;
        if (ui.sender.attr('id') == 'vlist')
            {
            $('#'+hID).val('');
            }
        else
            {
            $('#'+hID).val(fID);
            }
        }
    }).disableSelection();
    $('#vlist > #slist-li-username').sortable('option', 'containment', '#vlist');
});

至于HTML,我会将它上传到这里(因为当我将它粘贴到这里时,StackOverflow似乎会中断 - 即使在代码模式下):

http://sikosoft.net/jquery-sort-connect.html

Answer 1

我知道这是一个非常古老的问题..但我在几个小时之前遇到了同样的问题..并且找不到答案......经过大量的挖掘......我想出了这个......"不知道我不得不打电话给刷新方法!"

无论如何,基本上我在这里做的是:如果我在排序开始时检测到排除的元素,我暂时禁用与其他列表的连接,并在排序过程结束时恢复它.这将使元素在其列表中保持可排序..但未连接到其他列表.

希望这有助于任何人.

HTML

<ul class="first_list">
  <li>Element_1</li>
  <li class="excluded">Element_2</li>
  <li class="excluded">Element_3</li>
  <li>Element_4</li>
</ul>

<ul class="second_list">
  <li>Element2_1</li>
  <li>Element2_2</li>
  <li>Element2_3</li>
  <li>Element2_4</li>
</ul>

JS:

var firstList = $(".first_list");
var secondList = $(".second_list");

firstList.sortable({
    connectWith: ".second_list"
    start: function(event, ui) {
        if (ui.item.hasClass("exclude")) {
            firstList.sortable("option", "connectWith", false);
            firstList.sortable("refresh");
        }
    },
    stop: function(event, ui) {
        if (ui.item.hasClass("exclude")) {
            firstList.sortable("option", "connectWith", ".second_list");
            firstList.sortable("refresh");
        }
    });

secondList.sortable({
    connectWith: ".first_list"
});?