1

我有一个应该与另一个列表连接的列表，但是对于列表中的每个项目，目标列表都会更改。

我在用着

connectWith: '.valid'

然后在我的on('sortstart')函数中（在拖动项目时），我正在检查项目属性并将类应用valid到适当的列表以进行连接。然后我也运行一个$('.valid').sortable()

问题是，即使该类被正确应用于匹配列表并且它甚至获得了 ui-sortable 类，该项目也不会与它连接，但会再次尝试......

我意识到这可能对 jquery sortables 提出了太多要求，但如果有办法，那就太好了。

对此的任何想法将不胜感激。

这是一个或多或少显示问题的简化代码笔。

http://codepen.io/anon/pen/PboBvj

4

1 回答 1

2

首先，这可能是以下内容的重复：reject invalid sortable item in a sortable list

要回答您的问题，可以这样做，而不是按照您开车的方式。这是您的示例代码中的一个工作示例：https ://jsfiddle.net/Twisty/56kfcba5/

HTML

<ul id="list0" class="source">
  <li id="item-1" data-connect="list1">ITEM 1</li>
  <li id="item-2" data-connect="list2">ITEM 2</li>
</ul>

<ul id="list1" class="target"></ul>
<ul id="list2" class="target"></ul>

请记住，所有 ID 都应该是唯一的。

CSS

.source,
.target {
  border: 1px solid #000;
  min-height: 20px;
  max-width: 200px;
}

jQuery

$(function() {
  $('.source').sortable({
    connectWith: '.target',
    revert: true
  });
  $(".target").sortable({
    receive: function(e, ui) {
      if (ui.item.data("connect") !== $(this).attr("id")) {
        // reject the item
        ui.sender.sortable('cancel');
      }
    }
  })
});

就像我链接到的文章一样，我们比较列表收到source时的项目。target在这种情况下，该connectTo选项也可以设为单向。通过这种方式，我们设置了不接受特定项目的目标。

于 2016-11-05T14:02:55.310 回答