Question

我需要一个具有以下功能的jquery sortable：

通过拖放（这是容易的部分）对项目进行排序
分组和取消组合项目（这是我无法弄清楚的部分）。

这个过程是这样的：

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

示例：

A
B
C
D

然后，用户需要使用此可排序项将项目从最佳到最差排名。 用户需要能够将等效的项目（例如同等级）组合在一起

示例：

A
B C
d

所需的用户界面流程：

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

我尝试过的事情：

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

我对我的列表的其他方法或html结构持开放态度，如果它能像我在开头所描述的那样工作。

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

我认为你可以把所有其他可排序的元素（除了被移动的元素）放入droppables。然后你就可以将移动的那个放到任何其他的那个上。然后添加一个机制来取消组合和一些簿记和dom维护并且让你的叔叔陷入困境。我不知道多么好的可排序和可放置的一起玩，但我希望它没关系。我们应该用这些东西构建东西吗？嗯，这就是我开始的地方。

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

3 个答案: