拖动JQuery Draggable时显示Drop Zone，元素与光标错位问题

问题核心：当前.drop_zone用display: none隐藏，拖动时显示会插入文档流、占据空间，导致下方元素被推挤，破坏拖拽时的视觉连贯性。

最优解决方案：预占空间+样式切换 #

直接让Drop Zone始终占据布局空间，拖动时仅切换可见样式，彻底避免布局重排。

修改后的完整代码 #

JavaScript

$(document).ready(function() {
  $(".goal").draggable({
    revert: "invalid",
    zIndex: 1000,
    refreshPositions: true,
    start: function() {
      $('.drop_zone').addClass('active');
    },
    stop: function() {
      $('.drop_zone').removeClass('active');
    }
  });

  $(".drop_zone").droppable({
    tolerance: "pointer",
    drop: function(event, ui) {
      $(this).after(ui.draggable);
    }
  });
});

CSS

.bucket {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px;
}

.goal {
  border: 1px solid #999;
  padding: 5px;
  margin-bottom: 5px;
  cursor: move;
}

/* 预占空间，默认隐藏样式 */
.drop_zone {
  height: 50px;
  margin-bottom: 5px;
  opacity: 0;
  border: none;
  transition: opacity 0.2s, border 0.2s; /* 平滑过渡提升UX */
}

/* 拖动时激活的可见样式 */
.drop_zone.active {
  opacity: 1;
  border: 2px dotted #999;
}

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="ambition">
  <div class="bucket">
    <div class="drop_zone"></div>
    <div class="goal" draggable="true">Goal 1</div>
    <div class="drop_zone"></div>
    <div class="goal" draggable="true">Goal 2</div>
    <div class="drop_zone"></div>
    <div class="goal" draggable="true">Goal 3</div>
    <div class="drop_zone"></div>
    <div class="goal" draggable="true">Goal 4</div>
  </div>
</div>

替代方案：绝对定位脱离文档流 #

如果不想预占空间，可通过绝对定位让Drop Zone脱离文档流，避免影响原有布局：

修改后的CSS #

.bucket {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px;
  position: relative; /* 作为绝对定位的容器 */
}

.goal {
  border: 1px solid #999;
  padding: 5px;
  margin-bottom: 5px;
  cursor: move;
  position: relative;
  z-index: 1; /* 确保goal在Drop Zone上方 */
}

.drop_zone {
  display: none;
  height: 50px;
  border: 2px dotted #999;
  position: absolute;
  left: 10px;
  right: 10px;
  background: #fff; /* 覆盖下方内容，避免视觉干扰 */
}

该方案需配合JS在拖动开始时计算每个Drop Zone的top值以确保位置准确，适合需要节省布局空间的场景，但实现稍复杂。

内容的提问来源于stack exchange，提问作者Mark Peace