1

我有一个问题，我无法在任何地方找到解决方案。或者我只是错过了一些东西。

我有两个列表 - 可拖动和可排序。我使用可排序的选项项目。

当禁用的项目位于列表的开头时，我无法将可拖动项目放置在我认为合适的第一个位置。但是如果禁用的项目是最后一个，可拖动的项目可以放在最后一个位置。

我还尝试在可排序和可拖动列表中使用取消选项，但没有任何运气。

有谁知道一个解决方案，所以我不能先到最后一个位置。

这是我的小提琴：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'
});
4

0 回答 0