javascript - 可排序的 jQuery UI 来替换元素位置

Question

我想使用 jQuery UI Sortable 更改网格顺序。 我尝试将元素拖动到网格上，但假设如果我将 1 删除到 12，我需要 top 自动获取网格 12 到 1，而不是默认排序。我们怎样才能按这种方式排序呢？

$("div.reorder-photos-list").sortable({
    tolerance: 'pointer',
    start: function(event, ui) {

   },
 change: function(event, ui) {
     /*var start_pos = ui.item.data('start_pos');
     var index = ui.placeholder.index();
     console.log('Change ' + start_pos);*/

 },
 update: function(event, ui) {

   //alert(ui.placeholder.index());
   var start_pos = ui.item.index();
   console.log('Update ' + start_pos);

   var id = $(ui.item).attr('cur-id');
   var cp = $(ui.item).attr('cur-pos', start_pos+1);

   console.log("ID " + $(ui.item).attr('cur-id') + "Pos " + $(ui.item).attr('cur-pos'));

 }


   });

Answer 1

终于找到答案了， 检查我的 JSFiddle https://jsfiddle.net/5fyqz9f6/1/

如果有人需要更改网格系统的顺序，它很有用。

重新排序照片列表 = 主分区 col-md-4 = 循环 Div

在我的 JavaScript 中

$(document).ready(function() {
    var droppableParent;

    $('.reorder-photos-list .widget-user').draggable({
        revert: 'invalid',
        revertDuration: 200,
        start: function() {
            droppableParent = $(this).parent();
            droppableParent.addClass('being-dragged');
        },
        stop: function() {
            droppableParent.removeClass('being-dragged');
        }
    });

    $('.reorder-photos-list .col-md-4').droppable({
        hoverClass: 'drop-hover',
        drop: function(event, ui) {
            var draggable = $(ui.draggable[0]),
                draggableOffset = draggable.offset(),
                container = $(event.target),
                containerOffset = container.offset();

            //draggable.addClass('animated shake');

            setTimeout(function() {
                var pos = draggable.parent().index();
                var cid = draggable.attr('cid');
                var ctype = draggable.attr('ctype');
                var posFinal = pos + 1;
                var aUrl = "";

                alert("cid : " + cid + " pos : " + posFinal);



            }, 500);



            $('.widget-user', event.target).appendTo(droppableParent).css({
                opacity: 0
            }).animate({
                opacity: 1
            }, 200);

            draggable.appendTo(container).css({
                left: draggableOffset.left - containerOffset.left,
                top: draggableOffset.top - containerOffset.top
            }).animate({
                left: 0,
                top: 0
            }, 200);
        }
    });
});