Jquery 可排序元素在拖放时分配答案

【问题标题】：Jquery sortable elements allocate on drag and dropJquery 可排序元素在拖放时分配
【发布时间】：2020-02-03 23:39:46
【问题描述】：

我正在尝试在我的网站中实现 jquery 的可排序，但它具有奇怪的行为。当我尝试将元素拖动到另一个位置时，其他元素似乎已分配，所以我想知道是否有人可以向我解释为什么会发生这种情况？

$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

<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="sortable"> 
  <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/firefox-true.png" height="100px" width="100px" class="ui-state-default">
  <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/firefox-true.png" height="100px" width="100px" class="ui-state-default">
  <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/firefox-true.png" height="100px" width="100px" class="ui-state-default">
  <img src="https://html.com/wp-content/plugins/htmlcodetutorial-plugin/assets/images/firefox-true.png" height="100px" width="100px" class="ui-state-default">

</div>

【问题讨论】：

标签： jquery html jquery-ui-sortable

【解决方案1】：

从图像中删除宽度和高度，然后另外使用这个 css：

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 450px;
}

#sortable img {
  margin: 3px 3px 3px 0;
  padding: 1px;
  float: left;
  width: 100px;
  text-align: center;
}

看看这个： https://jsfiddle.net/r1tzswkL/6/

【讨论】：