Question

我正在尝试使用jQuery-UI创建一个带有两个列表的可排序接口。

我有以下代码大部分工作，但有时拖动的元素将飞到列表的右侧。见SSCE here。尝试将“费率”向下拖动一个位置然后再向上以观察问题。

代码：

$(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

该元素没有左设置，因此它向右移动。 The working fiddle

ggplot(blank.test, aes(x = X13C, y = X15N, color = Colour, shape = Shape, fill = Fill)) + 
  geom_point(size = 5, stroke = 3) + 
  scale_shape_manual(values=c(21,22,25)) +
  scale_color_brewer(palette = "Set2") +
  scale_fill_brewer(palette = "Set1") +
  theme_bw()

另请尝试使用jquery-ui提供的.panel-body{ padding:0; } .list-group-item{ left: 15px; } API。

Answer 2

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

Updated Example

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

jQuery可排序元素并不总是保留在父

2 个答案: