重新订购div订单后，元素无法正常工作

Question

我正在使用jQuery的.sortable函数来允许用户拖放<div>来重新排序。每个<div>上方都是<br>，在其上方添加了一个空格。

但是，在重新订购<div>后，<br>停止工作 - 该空间缺少＆＃34;。

JsFiddle：https://jsfiddle.net/1Ln5zzvh/

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#sortable').sortable({
    axis: 'y',
  });
});

＆＃13;

div#container {
  border: 1px solid;
  padding: 10px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="sortable">
  <br>
  <div id="container">
    helloooooooooooooooooooo
  </div>
  <br>
  <div id="container">
    helloooooooooooooooooooo
  </div>
  <br>
  <div id="container">
    helloooooooooooooooooooo
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在重新订购之前：

重新订购后：

Answer 1

您不应将<br>标记用于此目的。请改用边距。另外，请确保您不要多次使用id，因为它们应该是唯一的！

但问题出现是因为您只订购了div而不是br标签。所以br标签最后或者在顶部（根据你拖动的div）。

$(document).ready(function() {
  $('#sortable').sortable({
    axis: 'y',
  });
});

div.container {
  border: 1px solid;
  padding: 10px;
}

/* Selects every div.container that are preceded by a div.container element */
div.container ~ div.container {
    margin-top: 5px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="sortable">
  <div class="container">
    helloooooooooooooooooooo
  </div>
  <div class="container">
    helloooooooooooooooooooo
  </div>
  <div class="container">
    helloooooooooooooooooooo
  </div>
</div>

Answer 2

使用margin代替<br> updated fiddle