Question

我正在使用jQuery＆＃39; sortable函数来允许用户重新排列div的顺序。当用户单击该按钮时，会出现一个弹出div。

我尝试使用connectWith函数允许用户将此弹出式div拖动到div列表中，但是它不会移动到它们之间 - 而是保持在它们之上。这可能与z-index？

有关

＆＃13;

$("#click").on("click", function() {
  $("#sortable1").show();
});

$('#sortable1, #sortable2').sortable({
  axis: 'y',
  connectWith: '.first',
});

＆＃13;

.container {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 13%;
  width: 85%;
}

div.div {
  border: 1px solid;
  margin-top: 7.5px;
  margin-bottom: 7.5px;
}

.popup {
  width: 50%;
  left: 0;
  right: 0;
  top: 20%;
  margin: 0 auto;
  z-index: 1;
  position: absolute;
  background: #fff;
  border: 1px solid;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="sortable1" style="display: none;">
  <div class="popup">
    <h2>RED</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, former black-ops agent Frank Moses reassembles his old team in a last ditch effort to survive and uncover his assailants.</p>
  </div>
</div>

<div class="container">

  <button id="click">Click me</button>
  <br>
  <br>

  <div id="sortable2" class="first">

    <div class="div">
      <h2>Deep Impact</h2>
      <p>Unless a comet can be destroyed before colliding with Earth, only those allowed into shelters will survive. Which people will survive?</p>
    </div>

    <div class="div">
      <h2>The Adjustment Bureau</h2>
      <p>The affair between a politician and a contemporary dancer is affected by mysterious forces keeping the lovers apart.</p>
    </div>

    <div class="div">
      <h2>Lord of the Flies</h2>
      <p>Stranded on an island, a group of schoolboys degenerate into savagery.</p>
    </div>
  </div>

</div>

＆＃13;

JsFiddle：https://jsfiddle.net/o0exme4f/

这是预期输出（当你拖动div说“拖我”时，你可以看到它介于div之间说＆＃39;示例＆＃39; ;） - 这个例子没有使用弹出窗口：

＆＃13;

$("#sortable1, #sortable2").sortable({
  connectWith: ".first"
});

＆＃13;

div.ex {
  border: 1px solid;
  padding: 5px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="sortable1" class="first">
  <div class="ex">Example</div>
  <div class="ex">Example</div>
  <div class="ex">Example</div>
  <div class="ex">Example</div>
</div>

<p>
  Drag this div into the set above:
</p>

<div id="sortable2">
  <div class="ex">drag me</div>
</div>

＆＃13;

JsFiddle：https://jsfiddle.net/5ayf2yva/

Answer 1

前一段时间我遇到过类似的问题。这是由于您已应用于popup的位置属性。您应该从与position冲突的popup css中删除sortable属性，或将值更改为static。可排序的库不适用于绝对定位的项目。

.popup {
 width: 50%;
  left: 0;
  right: 0;
  top: 20%;
  margin: 0 auto;
  z-index: 1;
  background: #fff;
  border: 1px solid;
}

js fiddle

不能使用jQuery的connectWith来连接可排序的div

1 个答案: