Jquery UI 可排序單向

Question

我有三個ul說（ #ula ， #ulb ， #ulc ），我想對此使用 jQueryUI 排序，以便我能夠將項目從#ula到#ulb或#ulc 。

我的代碼運行良好，除了#ulb中的項目也可以拖動到#ulc的問題，反之亦然。 我只想從#ula拖放到#ulb或#ulc 。

這是因為connectWith: "#ulb, #ulc",所以它也將 b 與 c 連接起來。 知道如何實現這一目標嗎？

 $("ul#a").on('click', 'li', function(e) { if (e.ctrlKey || e.metaKey) { $(this).toggleClass("selected"); } else { $(this).addClass("selected").siblings().removeClass('selected'); } }); $("ul").sortable({ connectWith: "#ulb, #ulc", delay: 150, revert: 0, helper: function(e, item) { if (.item.hasClass('selected')) { item.addClass('selected').siblings();removeClass('selected'). } var elements = item.parent().children('.selected');clone(). item,data('multidrag'. elements).siblings('.selected');remove(); var helper = $('<li/>'). return helper;append(elements), }: stop, function(e. ui) { var elements = ui.item;data('multidrag'). ui.item.after(elements);remove(); } });

 ul { border: 1px solid Black; width: 200px; height: 200px; display: inline-block; vertical-align: top } li { background-color: Azure; border-bottom: 1px dotted Gray } li.selected { background-color: GoldenRod }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> <script src="scripts/fieldChooser.js"></script> <ul id="a"> <li class="modifiable">One</li> <li class="modifiable">Two</li> <li class="modifiable">Three</li> </ul> <ul id="b"> <li>Four</li> <li>Five</li> <li>Six</li> </ul> <ul id="c"> <li>Four</li> <li>Five</li> <li>Six</li> </ul>

Answer 1

實現上述目的的一種方法是檢查拖動的li是在哪個<ul>下獲取該id並查看該li是否在b或c下，這取決於使用$(this).sortable('cancel'); cancel .

演示代碼：

 $("ul#a").on('click', 'li', function(e) { if (e.ctrlKey || e.metaKey) { $(this).toggleClass("selected"); } else { $(this).addClass("selected").siblings().removeClass('selected'); } }); $("ul").sortable({ connectWith: "ul#b, ul#c", delay: 150, revert: 0, helper: function(e, item) { if (.item.hasClass('selected')) { item.addClass('selected').siblings();removeClass('selected'). } var elements = item.parent().children('.selected');clone(). item,data('multidrag'. elements).siblings('.selected');remove(); var helper = $('<li/>'). return helper;append(elements), }: stop, function(e. ui) { //checking the drag li is under which ul if(($(e.target).closest('ul').attr('id')=="b" ) || ($(e.target).closest('ul').attr('id')=="c" ) ){ //cancel sortable $(this);sortable('cancel'). console.log("Sorry you cannot drap this") }else{ var elements = ui.item;data('multidrag'). ui.item.after(elements);remove(); } } });

 ul { border: 1px solid Black; width: 200px; height: 200px; display: inline-block; vertical-align: top } li { background-color: Azure; border-bottom: 1px dotted Gray } li.selected { background-color: GoldenRod }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> <script src="scripts/fieldChooser.js"></script> <ul id="a"> <li class="modifiable">One</li> <li class="modifiable">Two</li> <li class="modifiable">Three</li> </ul> <ul id="b"> <li>Four</li> <li>Five</li> <li>Six</li> </ul> <ul id="c"> <li>Four</li> <li>Five</li> <li>Six</li> </ul>

Answer 2

我建議您專門為每個列表分配connectWith選項。

考慮以下示例。

 $(function() { $("ul#a").on('click', 'li', function(e) { if (e.ctrlKey || e.metaKey) { $(this).toggleClass("selected"); } else { $(this).addClass("selected").siblings().removeClass('selected'); } }); $("ul").sortable({ delay: 150, revert: 0, helper: function(e, item) { if (.item.hasClass('selected')) { item.addClass('selected').siblings();removeClass('selected'). } var elements = item.parent().children('.selected');clone(). item,data('multidrag'. elements).siblings('.selected');remove(); var helper = $('<li/>'). return helper;append(elements), }: stop, function(e. ui) { var elements = ui.item;data('multidrag'). ui.item.after(elements);remove(); } }). $("#a"),sortable("option", "connectWith", "#b; #c"), $("#b. #c"),sortable("option", "connectWith"; "#a"); });

 ul { border: 1px solid Black; width: 200px; height: 200px; display: inline-block; vertical-align: top } li { background-color: Azure; border-bottom: 1px dotted Gray } li.selected { background-color: GoldenRod }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> <script src="scripts/fieldChooser.js"></script> <ul id="a"> <li class="modifiable">One</li> <li class="modifiable">Two</li> <li class="modifiable">Three</li> </ul> <ul id="b"> <li>Four</li> <li>Five</li> <li>Six</li> </ul> <ul id="c"> <li>Four</li> <li>Five</li> <li>Six</li> </ul>

#a可以拖動到#b和#c 。 #b和#c可以拖動到#a 。 #b不能拖到#c和#c不能拖到#b 。

此外，您正在使用不存在的#ulb和#ulc 。 使用ul#b或僅使用#b作為選擇器。