Question

我想使用jQuery UI Sortable更改网格顺序。我试图在网格上拖动元素的方式，但假设如果我下降1到12，我需要顶部自动获取网格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/

如果有人需要按照网格系统的顺序进行更改，那么它很有用。

reorder-photos-list =主要部分 col-md-4 = Loop Divs

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

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

1 个答案: