JQuery的可拖動，可放開，及可排序不同項目

我有以下的JQuery設置拖放從列表中的項目到不同的列表：JQuery的可拖動，可放開，及可排序不同項目

// Set what items are draggable 
$(".widgetListItems").draggable(
{ 
    cursor: "move", 
    opacity: 0.5, 
    scroll: false, 
    revert: "invalid", 
    connectToSortable: "#dropList", 
    stop: function (event, ui) { if (deleteItem) { ui.helper.remove(); deleteItem = false; } } 
}); 

// Set what items can have objects dropped into them. 
$(".dropableArea").droppable(
{ 
    accept: ".widgetListItems", 
    tolerance: "touch", 
    drop: function (event, ui) 
    { 
     deleteItem = true; 

     var item = $(ui.draggable).text(); 
     item = $.trim(item); 

     switch (item) 
     { 
      case "Preventative Care": 
       $(this).append($("#panelPreventative")); 
       $("#panelPreventative").show(1000); 
       break; 
      case "Medical Claims": 
       $(this).append($("#panelMedicalClaims")); 
       $("#panelMedicalClaims").show(1000); 
       break; 
      case "Capitation": 
       $(this).append($("#panelCapitation")); 
       $("#panelCapitation").show(1000); 
       break; 
     } 
    } 
}); 

$(".dropableArea").sortable(
{ 
    cursor: "move", 
    connectWith: ".dropableArea", 
    update: function (event, ui) 
    { 
     $(ui.item).css("margin", "30px 0px"); 
    } 
});

我有類「widgetListItems」一個<li>的用戶可以拖動到屏幕上。接下來，可放置的是帶有「dropableArea」類的<ul>。我希望用戶擁有的體驗是，一旦他們將項目放入列表中，它們將被刪除的項目被移除，並且會顯示一個小部件，而不是類「loadedWidgetPanel」。這就是我在「下降」事件中所做的。我也希望這個列表中的用戶可以放入可排序的東西。通過我所擁有的代碼，用戶可以將項目放入列表中，顯示小部件，並且可以在小部件位於頁面上時對它們進行排序。

我想知道的是，如果可以對此列表進行排序，以便當用戶將一個元素放入列表中時，該小部件將被插入到用戶放置位置的位置，而不是被添加到末尾。我知道它被追加了，因爲我在「drop」事件中做了什麼，但我無法找出插入其他項目的不同方法。有人可以幫我嗎？

來源

2012-11-14 Eric R.

在你的drop: function() {}這是當一個項目被刪除時觸發的回調，當你執行你已有的邏輯後，你可以添加一個調用到一個排序例程。一些快速和骯髒的例子jquery alphabetical sort。

來源

2012-11-14 15:11:05

JQuery的可拖動，可放開，及可排序不同項目

回答

相關問題