javascript - 可排序跳转到容器外

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>