jquery - 將UL從UL A拖到UL B並從UL A移除？

我有兩個列表，第二個列表是sortable，我可以從第一個列表拖動到第二個列表，但無法弄清楚如何從第一個列表中刪除。jquery - 將UL從UL A拖到UL B並從UL A移除？

如果我刪除helper: "clone"，但項目（li）確實會被刪除，但拖放操作效果不佳（跳動，不光滑）。

（獎勵分 - 也取出左側UL當空）

enter image description here

<html> 
    <head> 
    <style> 
    #categorizer { padding: 2px; } 
    #list_to_process, #categories { color: blue; background-color: green; border: solid; border-width: 4px } 
    ul { padding: 10px; margin: 50px; float:left; list-style:none; } 
    li { color: yellow; padding: 25px 80px; cursor: move; } 
    li:nth-child(even) { background-color: #000 } 
    li:nth-child(odd) { background-color: #666 } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $("#categories").sortable({ 
      revert: true 
     }); 
     $("li.to_process").draggable({ 
      connectToSortable: "#categories", 
      helper: "clone", 
      revert: "invalid" 
     }); 
     }); 
    </script> 

    </head> 
    <body> 
    <div id="categorizer"> 
     <ul id="list_to_process"> 
     <li class="to_process" id="left1">1</li> 
     <li class="to_process" id="left2">2</li> 
     <li class="to_process" id="left3">3</li> 
     <li class="to_process" id="left4">4</li> 
     </ul> 
     <ul id="categories"> 
     <li id="righta">a</li> 
     <li id="rightb">b</li> 
     <li id="rightc">c</li> 
     <li id="rightd">d</li> 
     <li id="righte">e</li> 
     </ul> 
    </div> 
    </body> 
</html>

來源

2013-04-13 Michael Durrant

您可以在「接收」選項傳遞迴調可排序（），如下所示：

$(document).ready(function() { 
    $("#categories").sortable({ 
     revert: true, 
     receive: function(evt, ui) { 
     ui.item.remove(); 
     } 
    }); 
    $("li.to_process").draggable({ 
     connectToSortable: "#categories", 
     revert: "invalid", 
     helper: "clone" 
    }); 
    });

[編輯來自Michael]

請注意，我還補充說：

$('#list_to_process li').length == 0) { 
    $('#list_to_process').remove(); 
}

的ui.item.remove();使空UL仍然有填充和邊框，即

enter image description here

將被刪除後。

來源

2013-04-13 14:33:27

jquery - 將UL從UL A拖到UL B並從UL A移除？

回答

相關問題