Question

我遇到了问题，我无法在任何地方找到解决方案。或者我只是遗漏了一些东西。

我有两个列表 - 可拖动和可排序。我在sortable中使用项选项。

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

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

有没有人知道一个解决方案，所以我不能先放弃，也不能放弃最后的位置。

这是我的小提琴：jsBin example。在示例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'
});

防止在可排序的末尾删除draggable - jQuery UI

0 个答案: