Question

所以我有两个列表，单向连接，以便一个项目可以转到另一个，但没有任何东西可以进入原点列表。我需要什么样的点击功能才能将物品从他们来的地方移回？

  $(function() {
    $( ".current-campaign , .past-campaigns, .new-campaign" ).sortable({
      connectWith: ".new-campaign",
      handle: ".panel-heading",
      cancel: ".portlet-toggle",
      placeholder: "panel-placeholder",
      containment: "document",
      delay: 150,
      opacity: .75,
      revert: 50,
      start: function(e, ui){
        ui.placeholder.height(ui.item.height());
      }
    });

新广告系列

<ul class="new-campaign">
</ul>

过去的广告系列

<ul class="past-campaigns">

  <li>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title"> Message

          <a class="pull-right cancel" href="#"><i class="fa fa-times"></i></a></h3> 
        <span>Voiced by: Joe</span>
      </div>
      <div class="panel-body">
        Message Copy
      </div>
    </div>
  </li>

</ul>

我尝试过做这样的事情，但它没有用（虽然我不是javascript的专业人士）

$( ".cancel ").click(function() {
  $( this ).sortable( "cancel" );
});

Answer 1

您需要分离第二个列表中的所有元素，然后将其追加到第一个列表中。如果顺序对您很重要，那么您需要使用类似于第一个列表中元素最初所在顺序的数据属性来创建一些排序逻辑。

例如：

<li data-order="1">...</li>
<li data-order="2">...</li>
<li data-order="3">...</li>
...

使用jQuery的分离函数从DOM中删除元素，但在内存中保留对它的引用，以便您可以将其插入到其他位置。示例：

var items = $('li').detach()
$('#someDivId').append(items)

在点击功能中包裹它，你应该很高兴。上面提到的方法的jQuery文档可以在以下位置找到：

JQuery UI可排序 - 可以取消特定元素吗？

新广告系列

过去的广告系列

1 个答案: