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();

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

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

Fiddle

1 个答案: