jquery - 在 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"
});​