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();
});

预期行为：当我拖动＆＃34;项目2＆＃34;从第一列到第二列，一旦我删除该项目，我想要一个警告说该项目已经存在于该列中。

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 Sortable检查数组

1 个答案:

更新