1

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

  1. 通过拖放对项目进行排序（这是最简单的部分）
  2. 分组和取消分组项目（这是我无法弄清楚的部分）。

这个过程是这样的：

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

例子：

  • 一个
  • 乙
  • C
  • D

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

例子：

  • 一个
  • 公元前
  • D

所需的 UI 流程：

  • 句柄和占位符用于移动排序中的项目（同样，很简单，但我不知道如何做剩下的）

  • 当用户将鼠标悬停在现有项目上时，占位符可见，以便可以将这些项目组合在一起。一组项目是一个 li，如上所示。

  • 用户可以单击并拖动一个手柄来移动整个组，另一个手柄可以从组中删除一个项目并将其放置在列表中的新位置（作为个人，通过构建一个新的 li 或将其从一个组移动到另一个组将其添加到现有的 li)。

我尝试过的事情：

  • 嵌套的可排序插件，我无法让它们做我需要的事情。我没有大纲或文件夹结构，我希望所有项目都在同一级别。

  • connected sortables，我不知道一开始要创建多少个 sortables，我不知道用户是否想要将项目组合在一起以及最终会有多少个组。总的来说，这种方法是行不通的。

  • click and place，我为一个项目写了一个点击事件。当用户单击一个项目时，所有可能的占位符都变得可见，然后用户选择一个占位符并将项目移动到该占位符。它工作正常，但我真的很想使用更直观的拖放。

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

任何帮助是极大的赞赏！谢谢！！

4

3 回答 3

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;
    }
  });
});
于 2013-06-27T19:11:54.933 回答
0

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

于 2013-11-28T07:41:51.023 回答
0

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

于 2013-06-25T15:32:22.940 回答