jQuery UI Sortable 无法将子级拖回父级答案

【问题标题】：jQuery UI Sortable can't drag children back into parentjQuery UI Sortable 无法将子级拖回父级
【发布时间】：2015-01-09 10:10:39
【问题描述】：

Fiddle

我在让 Sortable 与这些 Bootstrap 面板一起工作时遇到了一些麻烦。我可以将子面板从其他面板中拖出，但不能重新拖入。这是 HTML：

<div class="col-xs-11 header-extend-config">
    <div class="panel panel-default header-item">
      <div class="panel-heading">
        <i class="fa fa-arrows"></i><h3 class="panel-title">title 1</h3><i class="fa fa-edit"></i>
      </div>
    </div>
    <div class="panel panel-default header-menu">
      <div class="panel-heading">
        <i class="fa fa-arrows"></i><h3 class="panel-title">title 2</h3><i class="fa fa-edit"></i>
      </div>
      <div class="panel-body">
        <div class="panel panel-default header-item">
          <div class="panel-heading">
            <i class="fa fa-arrows"></i><h3 class="panel-title">title 3</h3><i class="fa fa-edit"></i>
          </div>
        </div>
        <div class="panel panel-default header-item">
          <div class="panel-heading">
            <i class="fa fa-arrows"></i><h3 class="panel-title">title 4</h3><i class="fa fa-edit"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

还有 Javascript：

$(".panel-body, .header-extend-config").sortable({
    connectWith: ".panel-default, .header-extend-config"
}).disableSelection();

即使这个very basic version fiddle 也不起作用，所以它不可能是 Bootstrap 导致这个问题。

我怎样才能让它正常工作？（最好没有一些可怕的黑客攻击）

【问题讨论】：

我不是 100% 确定我理解正确，但据我所知，您可以在 connectWith 选项中添加原始 sortable 吗？ jsfiddle.net/Lv04w1ub
@blgt - 哇，我显然输入了default 而不是body。谢谢。写一个答案，我会接受的。

标签： javascript jquery css twitter-bootstrap jquery-ui

【解决方案1】：

根据 cmets，connectWith 选项中有错字。看起来它应该使用与 .sortable 相同的选择器：

$(".panel-body, .header-extend-config").sortable({
    connectWith: ".panel-body, .header-extend-config"
}).disableSelection();

小提琴：http://jsfiddle.net/Lv04w1ub/

【讨论】：