JQueryui - управляйте связными сортируемыми списками, заставляя только один элемент за списком

Question

Я использую подключаемые сортируемые списки Jqueryui, и я хотел бы удалять элементы только тогда, когда подключенный список пуст, поэтому я должен заставить пользователя добавить максимум 1 элемент. Использование Jquery не разрешено.

Итак, как мне управлять списком подключенных JQueryui, чтобы ограничить количество элементов внутри? Я хочу, чтобы sortable1 и sortable2 принимали только один элемент из sortable0.

<ul id="sortable0" class="connectedSortable"> 
  <li> word1 </li> <li> word2 </li> <li> wordN </li>
 </ul>

<ul id="sortable1" class="connectedSortable"> </ul>
<ul id="sortable2" class="connectedSortable"> </ul>

$(function() {
  $( "#sortable0, #sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" });
});

Заранее спасибо.

Answer 1

Вы также можете использовать решение, подобное этому

$("#sortable0, #sortable1, #sortable2").sortable({
    connectWith: "#sortable0, .connectedSortable:not(:has(li))"
});

Это позволяет вам перемещать ровно один элемент из #sortable0 в #sortable1 или / и #sortable2. Вы также можете переместить их обратно на #sortable0. или переместить его, например, из #sortable1 до #sortable2, если #sortable2 еще пусто

Проверьте это контрольный пример

---

Селектор, который я написал в connectWith, оценивается каждый раз, когда вы перетаскиваете элемент. таким образом, если sortable1/2 уже содержит элемент, он не помечен как connectWith и недоступен в качестве цели. Если вам нужен более точно настроенный элемент управления, например sortable0 принимает любое количество элементов, sortable1 точно 0 или 1 и sortable2 0 или 1 или 2 элемента, которые вы можете использовать

$("#sortable0, #sortable1, #sortable2").sortable({
    connectWith: "#sortable0, #sortable1:not(:has(li)), #sortable2:not(:has(li:eq(1)))"
});

Редактировать: вычеркнутый код не работает, нужно посмотреть на него

Answer 2

Поскольку для этого нет опции по умолчанию, вы должны использовать событие типа beforeStop или receive.

$( "#sortable0, #sortable1, #sortable2" ).sortable(
   { connectWith: ".connectedSortable",
     beforeStop: function(event,ui){
       // Do the check
     }
   }
);

, например.