要素の位置を置き換えるためのソート可能なjQuery UI

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/

に、 チェックを回答しました。

リオーダー・写真・リスト=メイン本部 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); 
     } 
    }); 
});