Question

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

我正在使用

connectWith: '.valid'

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

问题在于，即使正确地将类应用于匹配列表并且它甚至获得了可排序的类，该项也不会与它连接，但会在第二次尝试时使用...

我意识到这可能会对jquery sortables提出太多要求，但是如果有办法的话会很好。

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

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

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

Answer 1

首先，这可能是：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项进行比较。在这种情况下，{{1}}选项也可以是单向的。通过这种方式，我们设置了不接受特定项目的目标。

在拖动jQuery可排序的同时动态设置connectWith

1 个答案: