悬垂和拖放以更改顺序

Question

我有一些行，并希望给用户的特点，拖放，以改变他们的订单。我如何实现它呢？我想使用jquery是可能的。我也在使用php。

Answer 1

看看jquery的拖曳，可下垂和可排序。

可排序是您所要寻找的，但是可拖和可下垂也是很好的了解，因为它与可排序功能有很大关系。

循环遍历所有您需要序列化数据的列表，如果您想保存任何信息，可以使用w/ Ajax传递数据。

Answer 2

只是必须解决这个完全相同的问题，所以不妨在这里添加一些东西，以防它对其他人有所帮助。

jQuery UI可排序提供了以一种很好的方式重新排序项目的基本客户端功能，但是您仍然需要保持订单更改。

我的解决方案是编写一个JQuery插件，执行以下操作：

• 它为本例假设了一个表，但只要做一些更改，它就可以用于一个列表。
• 找到表的tbody元素(排序需要tbody，而不是表，因为它重新排序了直接的子级)。
• 如果表有标头，则插入空标题列(请参见下一步的原因)。
• 插入拖动图标占位符*作为新的td (这需要一个新的列标题)
• 将可排序应用于目标元素。提供一个update函数来捕捉拖动更改，并将Ajax "PUT“发送到服务器，指定行对象的id、父对象的id和被拖动的项的新排序位置。
• 插件假定父容器(例如表)具有类似于data-id="parentid"的属性，其中parentid是行所属的父项的唯一id。
• 插件假定显示的每一行(例如表的tr)都有一个类似于data-id="itemid"的属性，其中itemid是该行表示的项的唯一id

我的可排序更新函数的简化版本：

update: function (event, ui)
{
    // Get moved row from ui param
    var $target = $(ui.item);

    // Extract the PK of the item just dragged
    var itemId = parseInt($target.attr('data-id'));

    // Extract the PK of the parent of the items
    var parentId = parseInt($target.parent('table').attr('data-id'));

    // Display order is 1-based in my database so add 1
    var index = $target.index() + 1;

    // Send REST call to server to update new display order
    var url = "/api/reorder/" + itemId.toString() + "?order=" + index.toString() + "&parent="+ parentId.toString();
    $.ajax({
        url: url,
        type: "PUT",
        error: function (xhr, status, error)
        {
            alert(url + " " + error);
        },
        success: function (success: bool, status: string, xhr)
        {
            // success is true if all went well server-side
        }
    });
}

服务器端-我自己的REST服务是通过一个MVC API控制器，所以我将概述下面的算法。

服务器端算法：

bool Put(itemId, displayOrder, parentId)
{
    var order = 1;
    var listOfOrderedItems = getAllRecordsSortedByDisplayOrderBelongingTo(parentid);  // Some way of fetching just the set of records belonging to the specified parent id
    foreach (var item in listOfOrderedItems)
    {
         // Skip the new insertion point index
         if (order == displayOrder)
         {
              order++;
         }
         // Skip the item we are moving - it gets a new fixed order
         if (item.id != itemId)
         {
             item.DisplayOrder = order++;  // Could use be a SQL update here
         }
         else
         {
             item.DisplayOrder = displayOrder;  // Could use be a SQL update here
         }
    }
}

最终的结果是，我可以将一个reorderData插件应用于任何具有一行jQuery的表，如：

$(function () {
    $('table.sortable').reorderData();
});

​

*注意:拖动占位符(左边的3行图标)是使用的，因为我认为这是一种糟糕的用户体验，可以通过拖动行中的任何位置来拖动整行数据。通过在可排序选项中使用cancel: 'tr>td:not(:first-child)'，它将只允许每一行的第一个单元格中的新拖动句柄进行拖动。