jquery用戶界面可排序的「交換」列表元素在碰撞

Question

如何修改jquery ui可排序，因此我可以從一個列表中拖拽一個項目在之上的項目在第二個列表中並且有兩個項目在放置時交換位置？

https://jqueryui.com/sortable/#connect-lists

Answer 1

我用解決方案的組合，在這個到達，#large_tiles和#small_tiles是兩個列表：

$(function() { 
$("#large_tiles li, #small_tiles li").draggable({ 
    zIndex: 2, 
    appendTo: "body", 
}); 

initDroppable($("#large_tiles li, #small_tiles li")); 

initSwap(); 
function initSwap() { 
    initDroppable($("#large_tiles li, #small_tiles li")); 
    initDraggable($("#large_tiles li, #small_tiles li")); 
} 
function initDraggable($elements) { 
    $elements.draggable({ 
     zIndex: 2, 
     appendTo: "body", 
     helper: "clone", 
     start: function(e, ui) { 
      $(ui.helper).addClass("clone"); 
     }, 
     cursorAt: { left:50, top:75 } 
    }); 
} 
function initDroppable($elements) { 
    $elements.droppable({ 
     activeClass: "active-tile", 
     hoverClass: "hover-tile", 
     over: function(event, ui) { 
      var $this = $(this); 
     }, 
     drop: function(event, ui) { 
      var $this = $(this); 
      var linew1 = $(this).after(ui.draggable.clone()); 
      var linew2 = $(ui.draggable).after($(this).clone()); 
      $(ui.draggable).remove(); 
      $(this).remove(); 
      initSwap(); 
     } 
    }); 
} 
});