jQuery UI Sortable 无法将子项拖回父项

Question

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 导致了这个问题。

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

Answer 1

根据评论，connectWith 选项中有错字。看起来它应该使用与 .sortable:

相同的选择器

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

Fiddle: http://jsfiddle.net/Lv04w1ub/

jQuery UI Sortable 无法将子项拖回父项

jQuery UI Sortable can't drag children back into parent

javascript

jquery

css

twitter-bootstrap

jquery-ui

Fiddle