Drape and quit to reorder

Question

I have a few lines and you want to give the user the ability to drag and drop to change their orders. how can i implement this? I think this is possible with jquery. I also use php.

Answer 1

Check out jquery UI , and . Draggable Droppable Sortable

Sorting is what you are looking for, but draggable and droppable are good to know because it has a lot to do with sortable functions.

Scroll through the list you need to serialize and pass it using w / Ajax if you want to save any information.

Answer 2

, , , - , - .

jQuery UI Sortable , , .

JQuery, :

• , .
• tbody ( tbody, , ).
• , (. ).
• * td ( )
• . , AJAX "PUT" , , , .
• , (, ) , data-id="parentid", parentid - ,
• , (, tr) , data-id="itemid", itemid - ,

sortable:

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)' Sortable, .