当拖放区域显示时，JQuery 可拖动与光标不同步

Question

我正在尝试实现一种设置，其中拖动 div 会显示可以放置它的放置区域。问题是，当显示可拖动原点上方的放置区域时，它会将 div 向下推离光标其高度的距离，这会产生奇怪的 UX。

下面的复制代码 - 有什么线索吗？

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

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

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

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

.drop_zone {
  display: none;
  height: 50px;
  border: 2px dotted #999;
  margin-bottom: 5px;
}

<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>

Answer 1

为此，您应该考虑切换到可排序。

$(function() {
  $(".bucket").sortable({
    placeholder: "drop_zone"
  });
});

.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;
  border: 2px dotted #999;
  margin-bottom: 5px;
}

<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="goal">Goal 1</div>
    <div class="goal">Goal 2</div>
    <div class="goal">Goal 3</div>
    <div class="goal">Goal 4</div>
  </div>
</div>