jquery sortable，也可以将项目组合在一起答案

【问题标题】：jquery sortable that can also group items togetherjquery sortable，也可以将项目组合在一起
【发布时间】：2013-06-25 14:58:54
【问题描述】：

我需要一个具有以下功能的可排序 jquery：

通过拖放对项目进行排序（这很容易）
对项目进行分组和取消分组（这是我想不通的部分）。

流程如下：

用户提供了一个项目列表。 我使用该列表通过 jquery 构建一个可排序的无序列表。

例子：

一个
乙
C
D

然后用户需要使用这个排序来对项目进行从最好到最差的排序。 用户需要能够将等价的项目组合在一起（例如相同等级）

例子：

一个
BC
D

所需的 UI 流程：

句柄和占位符用于移动可排序中的项目（同样，很简单，但我不知道如何完成其余的操作）
当用户将鼠标悬停在现有项目上时，占位符可见，以便将这些项目组合在一起。如上所示，一组项目是一个 li。
用户可以单击并拖动一个手柄来移动整个组，另一个手柄可以从组中删除一个项目并将其放置在列表中的新位置（作为个人通过构建一个新的 li 或移动它从一个组到另一个组，将其添加到现有的 li)。

我尝试过的事情：

嵌套的可排序插件，我无法让它们完成我需要的工作。我没有大纲或文件夹结构，我希望所有项目都处于同一级别。
connected sortables，我不知道一开始要创建多少个 sortables，我不知道用户是否想要将项目组合在一起以及会有多少个组结束。总的来说，这种方法行不通。
点击并放置，我为一个项目写了一个点击事件。当用户单击一个项目时，所有可能的占位符都变得可见，然后用户选择一个占位符并将项目移动到该占位符。它工作正常，但我真的很想使用更直观的拖放。

我愿意接受其他方法或我的列表的 html 结构，如果它可以像我在开始时描述的那样工作。

非常感谢任何帮助！谢谢！！

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

如果我理解正确，我认为我有一些解决你的问题的方法。

首先，您应该为此使用一些服务器端语言（例如 php），并且要创建组和项目，您应该使用一些数据库（例如 mysql）。在您的数据库中，您需要创建两个表 Items 和 Groups，并在它们之间建立一个（组）到多个（项目）的关系。当您这样做时，您需要使用您的服务器端语言获取组和项目，并将其显示为您的可排序部分。

您需要像这样显示您的组和项目：

for($i = 0; $i < $groups; $i++)
{
    echo '<ul id="group_'.$i.'" group_id="'.$groups[$i]->getId().'" class="droptrue">';
    echo '<li class="disabled">'.$name_of_group.'</li>'; - this item needs to be disabled for drag and drop and you can do that for any individual item with sortable ui plugin
    for($j = 0; $j < count($items); $j++)
    {
        echo '<li id="'.$items[$j]->getId().'" class="enabled ui-state-highlight">'.$item.'</li>';
    }
    echo '</ul>';
}

这是您可以对项目进行分组并使用它们进行操作的一种方式。

这是用于操作物品的 javascript 代码。

$(function() {
  $( "ul.droptrue" ).sortable({
    connectWith: "ul",
    items: "> li.enabled",
    start: function(event, ui){
        var parent = ui.item.parent();
        parent.addClass('modified_ul');
    },
    stop: function(event, ui){
        var parent = ui.item.parent();
        parent.addClass('modified_ul');
    },
    update: function(event, ui){
        $('#update_channel_order').removeAttr('disabled').removeClass('button_big_disabled');
  }
});

$('#update_channel_order').click(function(){

    if (!$(this).attr('disabled'))
    {
      $('.modified_ul').each(function(){

          var array_for_db = [];
          var group_id = $(this).attr('group_id');

          var lis_enabled = $(this).children('.enabled');
          for(i = 0; i < lis_enabled.length; i++)
          {
              var id = lis_enabled[i].attributes['id'].value;
              var obj = {};
              obj['id'] = id;
              obj['index'] = i;
              array_for_db.push(obj);
          }
        $.ajax({
            url: '/path/to/your/function/group_id/' + group_id + '/values/' + JSON.stringify(array_for_db),
            beforeSend: function() {
              $('#loader_channel_order').show();
            },
            success: function(data) {
              location.reload();
            },
            complete: function() {
              $('#loader_channel_order').hide();
            }
        });
      });
      $(this).addClass('button_big_disabled').attr('disabled', 'disabled');
    }
    else
    {
      return false;
    }
  });
});

【讨论】：

我有一个 db 后端，并且我成功地显示了项目的顺序，但我需要一种方法让用户更新该顺序，如上所述。关于如何允许用户这样做的任何想法？
我有一个版本，但我不知道这是否适合您。无论如何，我会把我的代码放在答案中。如果您没有从中受益，也许其他人会这样做。
感谢您的回复，但我认为这不能解决我的问题。我事先不知道组的数量，必须动态创建和删除组。如果你有任何想法，我会很感激，如果没有，我很感激你到目前为止的想法。谢谢。

【解决方案2】：

只是一个想法。您可以使用 optgroup 对值进行分组吗？

【讨论】：

我不确定你的意思。我虽然那个选项组是用于

【解决方案3】：

我认为您可以将所有其他可排序元素（除了被移动的元素）放入可放置元素中。然后，您就可以将移动的一个放到其他任何一个上。然后添加一个机制来取消分组和一些簿记和 dom 维护，并让你的叔叔鲍勃。我不知道 sortable 和 droppable 将如何很好地结合在一起，但我希望它会没问题。我们应该用这些东西来建造东西，对吧？好吧，无论如何，这就是我要开始的地方。

【讨论】：