Question

我遇到Jonas von Andrian's jQuery Sortable plugin的问题。当我尝试移动物品时，它们首先飞出.row，然后才能正常移动。

我做错了什么？

$(".items-container").sortable({
  containerSelector: ".items-container",
  itemSelector: ".item",
  containerPath: "> .row"
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>

<div class="container">
  <div class="items-container">
    <div class="row">
      <div class="col-xs-4 panel panel-danger item">
        <div class="panel-heading">First panel</div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
      </div>
      <div class="col-xs-4 panel panel-warning item">
        <div class="panel-heading">Second panel</div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
      </div>
      <div class="col-xs-4 panel panel-success item">
        <div class="panel-heading">Third panel</div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
      </div>
    </div>
  </div>
</div>

View on JS Bin

Answer 1

我建议使用itemPath而不是containerPath，基于"Sort Tables" example。

文档对我来说有点模糊。它说itemPath是“项目与其子容器之间的确切css路径。”但在我看来，它是容器及其项之间的CSS路径，这是containerPath应该定义的。

我还添加了placeholder选项，以便将Bootstrap样式应用于占位符元素。

$(".items-container").sortable({
  containerSelector: ".items-container",
  itemPath: "> .row",
  itemSelector: ".item",
  placeholder: '<div class="col-xs-4 panel placeholder"/>'
});

.row .dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>

<div class="container">
  <div class="items-container">
    <div class="row">
      <div class="col-xs-4 panel panel-danger item">
        <div class="panel-heading">First panel</div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
      </div>
      <div class="col-xs-4 panel panel-warning item">
        <div class="panel-heading">Second panel</div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
      </div>
      <div class="col-xs-4 panel panel-success item">
        <div class="panel-heading">Third panel</div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
      </div>
    </div>
  </div>
</div>

可以在容器外跳转

1 个答案: