Question

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

我的困境是我希望锁定到可见列表中的一些字段，但仍可在该列表中排序。例如，“username”，“email”和“password”字段应锁定在可见列表中（因为它们始终需要用于注册）。

这甚至可能吗？也许我还没有发现它是一个明智的选择。我已经浏览了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"
});

Answer 2

您看起来很难构建的具体功能，但也许这有任何帮助。

每当排除的项目移动到连接列表时触发取消事件。只需为排除的项目提供一些特殊属性（类）。

HTML

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

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

JS

$(".sortables").sortable({
  connectWith: '.sortables', 
  over: function(){
    if($(ui.item.hasClass('excluded')){
       $(ui.sender).sortable('cancel');
    }
});

Answer 3

也许这会对你有所帮助：

http://jqueryui.com/demos/sortable/#items

这是您之前询问的列表中的锁定元素。

在jQuery可排序列表中排除一个或多个元素与连接（使用connect With）

3 个答案: