jQuery UI Sortable占位符固定顶部问题求助

问题描述 #

使用jQuery UI Sortable对一组<div>元素排序时，添加的占位符始终固定在顶部，无法随拖拽位置动态变化，需要实现官方示例中的正常占位效果。

问题根源 #

布局中用**浮动（float）**排列.form_elements ._element内部子元素，但未给.form_elements ._element添加清除浮动处理，导致Sortable无法正确计算可排序项的高度和位置，进而引发占位符定位异常。此外，.ui-state-highlight的固定高度与实际可排序项高度不匹配，也会加剧位置偏差。

修复方案 #

1. 为.form_elements ._element添加清除浮动样式，确保元素高度被正确计算，推荐使用overflow: hidden实现；
2. 调整.ui-state-highlight的间距和高度，移除固定高度让其自适应可排序项高度，同时统一占位符与可排序项的底部间距。

修改后的完整代码 #

JavaScript

$(function() {
  $('#sortable').sortable({
    placeholder: 'ui-state-highlight',
  }).disableSelection();
});

CSS

.form_elements {
  width: 100%;
}

.form_elements ._element {
  width: 100%;
  display: block;
  overflow: hidden; /* 清除浮动，确保元素高度正确计算 */
  margin-bottom: 15px; /* 统一可排序项的底部间距 */
}

.form_elements ._element ._tu {
  float: left;
  width: 80px;
}

.form_elements ._element ._tu input[type=checkbox] {
  scale: 0.8;
  border-color: var(--bs-gray-500);
  float: left;
}

.form_elements ._element ._tu .number {
  float: right;
  padding-right: 15px;
  color: #6e6e6e;
}

.form_elements ._element ._elementContent {
  width: calc(100% - 80px);
  min-height: 10px;
  background-color: #fff;
  border: 1px solid #eaedf0;
  float: left;
  padding: 10px;
}

.form_elements ._element ._elementContent .line {
  width: 100%;
}

.form_elements ._element ._elementContent .line.lh16 {
  line-height: 18px;
}

.form_elements ._element ._elementContent .line .icon {
  float: left;
  color: #6e6e6e;
  padding-right: 5px;
}

.form_elements ._element ._elementContent .line .icon i {
  font-size: 18px;
}

.form_elements ._element ._elementContent .line .title {
  float: left;
  color: #6e6e6e;
  font-size: 16px;
}

.form_elements ._element ._elementContent .line .rs {
  float: right;
  display: none;
}

.form_elements ._element ._elementContent .line .rs .settings {
  float: left;
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .clone {
  float: left;
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .move {
  float: left;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent:hover .rs {
  display: block !important;
}

.ui-state-highlight {
  margin: 0 0 15px; /* 匹配可排序项的底部间距 */
  border: 2px dashed #ccc;
  background-color: rgba(240, 240, 240, 0.5);
  box-sizing: border-box;
  overflow: hidden; /* 确保内部浮动不影响占位符高度 */
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"
  integrity="sha256-J8ay84czFazJ9wcTuSDLpPmwpMXOm573OUtZHPQqpEU="
  crossorigin="anonymous"></script>
<div class="form_elements ui-sortable" id="sortable">
  <div class="_element" data-index="1">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">2.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="fa fa-hashtag"></i>
        </div>
        <div class="title">Number</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="2">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">3.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="fa fa-hashtag"></i>
        </div>
        <div class="title">Number</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="3">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">4.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="flaticon2-sort-alphabetically"></i>
        </div>
        <div class="title">Text</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="0">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">1.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="flaticon2-sort-alphabetically"></i>
        </div>
        <div class="title">Text</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Carsten Løvbo Andersen