jQuery Sortable 元素并不总是留在父元素中

Question

我正在尝试使用 jQuery-UI 创建一个包含两个列表的可排序界面。

除了有时被拖动的元素会飞到列表的右侧之外，我的大部分代码都在运行以下代码。参见 SSCE here .尝试将“Rates”向下拖动一个位置，然后再向上拖动以观察问题。

代码:

$(function() {
  $("#enabledCategories, #disabledCategories").sortable({
    placeholder: "sortable-placeholder",
    connectWith: ".categorySortable",
    axis: "y",
    handle: ".sortHandle",
    revert: 50
  }).disableSelection();
});
$(document).ready(function() {
  $("<style>")
    .prop("type", "text/css")
    .html(".sortable-placeholder { height: " + ($(".list-group-item").outerHeight(true) + 8) + "px; }")
    .appendTo("head");
});

.panel-manage .list-group-item {
    display: inline-block;
    width: 100%;
    padding: 7px 7px 7px 14px;
}
.panel-manage .list-group-item i {
    margin-right: 8px;
}
.panel-manage .list-group-item .panel-item-text {
    float: left;
    display: inline-block;
    padding: 4px 0px;
}
.panel-manage .list-group-buttons {
    float: right;
}
.panel-manage .list-group-item button {
    width: 75px;
    padding: 4px 0px;
    float: left;
}
.panel-manage .list-group-item button:not(:last-child) {
    margin-right: 10px;
}

<div class="panel panel-primary panel-manage" id="panel-categories">
  <div class="panel-heading">
    <h3 class="panel-title"><i class="fa fa-bars"></i> Tabs</h3>
  </div>
  <div class="panel-body">
    <div class="list-group categorySortable ui-sortable" id="enabledCategories">
      <div class="list-group-item">
        <span class="panel-item-text">
                        <i class="sortHandle fa fa-sort ui-sortable-handle"></i> Home                      </span>
        <div class="list-group-buttons">
          <button type="button" class="btn btn-md btn-warning category-edit" data-book-id=""><i class="fa fa-edit"></i> Edit</button>
          <button type="button" class="btn btn-md btn-danger category-delete" data-book-id="" data-book-name=""><i class="fa fa-trash-o"></i> Delete</button>
        </div>
      </div>
      <div class="list-group-item">
        <span class="panel-item-text">
                        <i class="sortHandle fa fa-sort ui-sortable-handle"></i> Rates                      </span>
        <div class="list-group-buttons">
          <button type="button" class="btn btn-md btn-warning category-edit" data-book-id=""><i class="fa fa-edit"></i> Edit</button>
          <button type="button" class="btn btn-md btn-danger category-delete" data-book-id="" data-book-name=""><i class="fa fa-trash-o"></i> Delete</button>
        </div>
      </div>
      <div class="list-group-item">
        <span class="panel-item-text">
                        <i class="sortHandle fa fa-sort ui-sortable-handle"></i> FAQ                      </span>
        <div class="list-group-buttons">
          <button type="button" class="btn btn-md btn-warning category-edit" data-book-id=""><i class="fa fa-edit"></i> Edit</button>
          <button type="button" class="btn btn-md btn-danger category-delete" data-book-id="" data-book-name=""><i class="fa fa-trash-o"></i> Delete</button>
        </div>
      </div>
      <div class="list-group-item">
        <span class="panel-item-text">
                        <i class="sortHandle fa fa-sort ui-sortable-handle"></i> About Us                      </span>
        <div class="list-group-buttons">
          <button type="button" class="btn btn-md btn-warning category-edit" data-book-id=""><i class="fa fa-edit"></i> Edit</button>
          <button type="button" class="btn btn-md btn-danger category-delete" data-book-id="" data-book-name=""><i class="fa fa-trash-o"></i> Delete</button>
        </div>
      </div>
    </div>
    <h4>Disabled:</h4>
    <div class="list-group categorySortable ui-sortable" id="disabledCategories">
      <div class="list-group-item">
        <span class="panel-item-text">
                        <i class="sortHandle fa fa-sort ui-sortable-handle"></i> Calendar                      </span>
        <div class="list-group-buttons">
          <button type="button" class="btn btn-md btn-warning category-edit" data-book-id=""><i class="fa fa-edit"></i> Edit</button>
          <button type="button" class="btn btn-md btn-danger category-delete" data-book-id="" data-book-name=""><i class="fa fa-trash-o"></i> Delete</button>
        </div>
      </div>
      <div class="list-group-item">
        <span class="panel-item-text">
                        <i class="sortHandle fa fa-sort ui-sortable-handle"></i> Blog                      </span>
        <div class="list-group-buttons">
          <button type="button" class="btn btn-md btn-warning category-edit" data-book-id=""><i class="fa fa-edit"></i> Edit</button>
          <button type="button" class="btn btn-md btn-danger category-delete" data-book-id="" data-book-name=""><i class="fa fa-trash-o"></i> Delete</button>
        </div>
      </div>
      <div class="list-group-item">
        <span class="panel-item-text">
                        <i class="sortHandle fa fa-sort ui-sortable-handle"></i> Info                      </span>
        <div class="list-group-buttons">
          <button type="button" class="btn btn-md btn-warning category-edit" data-book-id=""><i class="fa fa-edit"></i> Edit</button>
          <button type="button" class="btn btn-md btn-danger category-delete" data-book-id="" data-book-name=""><i class="fa fa-trash-o"></i> Delete</button>
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-block btn-md btn-success category-add" value="Add"><i class="fa fa-plus"></i> Add</button>
  </div>
</div>

Answer 1

当 .list-group-item 元素被拖动时，它是绝对定位的。要解决您遇到的问题，您可以相对定位父 .list-group 元素，然后将 left: 0 添加到可拖动的 .list- group-item 元素。

Updated Example

.list-group {
  position: relative;
}
.list-group .list-group-item {
  left: 0;
}