Предотвратить перетаскивание в конце сортируемого - JQuery UI

Question

У меня проблема, и я нигде не мог найти решение.Или я просто что-то упустил.

У меня есть два списка - перетаскиваемый и сортируемый.Я использую опцию items в сортируемом.

Когда отключенные элементы находятся в начале списка, я не могу поместить перетаскиваемый элемент на первую позицию, которая мне кажется хорошей в моем случае.Но если отключенные элементы являются последними, перетаскиваемый элемент может быть отброшен на последней позиции.

Я также пробовал с опцией cancel как в сортируемых, так и в перетаскиваемых списках, но безуспешно.

Кто-нибудь знает решение, поэтому я не могу ни спуститься ни на первую, ни на последнюю позицию.

Вот моя скрипка: jsBin пример .В Примере 1 - первый случай, а в Примере 2 - второй.

Или HTML :

<h2>Example 1</h2>

<h4>Sortable</h4>
<ul class="sortable1">
  <li class="ui-state-disabled">Item 1 disabled</li>
  <li class="ui-state-disabled">Item 2 disabled</li>
  <li>Item 3 not disabled</li>
</ul>

<h4>Draggable</h4>
<ul class="draggable1">
  <li>Item 1 to drag</li>
  <li>Item 2 to drag</li>
  <li>Item 3 to drag</li>
</ul>



<h2>Example 2</h2>

<h4>Sortable</h4>

<ul class="sortable2">
  <li>Item 1 not disabled</li>
  <li class="ui-state-disabled">Item 2 disabled</li>
  <li class="ui-state-disabled">Item 3 disabled</li>
</ul>

<h4>Draggable</h4>
<ul class="draggable2">
  <li>Item 1 to drag</li>
  <li>Item 2 to drag</li>
  <li>Item 3 to drag</li>
</ul>

<style>
  .placeholder {border: 1px solid #ccc; height: 20px;}
</style>

И JS :

$('.draggable1 li').draggable({
  revert: 'invalid',
  helper: 'clone',
  connectToSortable: '.sortable1',
  cancel: '.ui-state-disabled'
});

$('.sortable1').sortable({
  tolerance: 'pointer',
  items: '*:not(".ui-state-disabled")',
  placeholder: 'placeholder',
  cancel: '.ui-state-disabled'
});



$('.draggable2 li').draggable({
  revert: 'invalid',
  helper: 'clone',
  connectToSortable: '.sortable2',
  cancel: '.ui-state-disabled'
});

$('.sortable2').sortable({
  tolerance: 'pointer',
  items: '*:not(".ui-state-disabled")',
  placeholder: 'placeholder',
  cancel: '.ui-state-disabled'
});