用于替换元素位置的可排序jQuery UI

最后我找到了答案, 检查我的JSFIDLE https://jsfiddle.net/5fyqz9f6/1/

如果任何人需要对网格系统的顺序进行更改,这很有用。

重新排序照片列表=主分区 col-md-4=回路分区

在我的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);
        }
    });
});