JQuery 删除前可排序检查数组

Question

我想在将项目放入列表之前检查目标数组的内容。这是示例：http://jsfiddle.net/steventije/jntnmw2e/

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Item 6</li>
    <li class="ui-state-highlight">Item 7</li>
    <li class="ui-state-highlight">Item 8</li>
    <li class="ui-state-highlight">Item 9</li>
    <li class="ui-state-highlight">Item 2</li>
</ul>
<ul id="sortable3" class="connectedSortable">
    <li class="ui-state-highlight">Item 11</li>
    <li class="ui-state-highlight">Item 12</li>
    <li class="ui-state-highlight">Item 13</li>
    <li class="ui-state-highlight">Item 14</li>
    <li class="ui-state-highlight">Item 15</li>
</ul>

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

预期行为：当我将 "Item 2" 从第一列拖到第二列时，只要我放下该项目，我就需要一个提示，说明该项目已经存在于该列中。

UPDATE 和 OVER 没有按我预期的方式工作。感谢您的帮助

Answer 1

应该这样做

stop: function(evt, ui) {
  var source = ui.item.html(); 
  if (ui.item.closest('ul').find('li:contains(' + source + ')').length > 1) {
    alert(source + ' already exists');
    return false;
  }
}

ui.item.html();

将给出当前移动元素的文本。

ui.item.closest('ul')

将给出要将元素移动到的容器的 UL。

.find('li:contains(' + source + ')').length

将给出以文本作为当前移动元素的 li 元素的数量。

return false

会将项目恢复到原来的位置

这里有演示http://jsfiddle.net/dhirajbodicherla/jntnmw2e/1/

更新

如果必须根据 ID 检查元素：（确保 ID 不重复）

var source = ui.item.html();
if (ui.item.closest('ul').find('li#' + source).length > 0) { // <--- notice the '0'
  alert(source + ' already exists');
  return false;
}

JQuery 删除前可排序检查数组

JQuery Sortable check array BEFORE drop

jquery

jquery-ui-sortable

更新