JQuery 可拖动鼠标光标偏移

Question

我有可拖动的列表元素，我可以将它们拖到另一个列表中（实际上不是列表而是基于 omnifaces / primefaces 的树）。

问题：

我需要从第二个列表拖到第二个列表（重新排列元素）。

为此，在列表的每个元素之间，我有一个 height = 0px 的 droppable，当我的 draggable 重叠在这个级别时，我将其修改为 20px 没问题，问题来自于这样一个事实，即当我调整 droppable 的大小时，鼠标光标从 draggable 移动。

这很难解释，下面的图片说明了问题

我已经测试了 cursorAt 选项，但没有成功，如果有人建议这个移动可能来自哪里

Answer 1

使用下面的最小值 jQuery 和 CSS 就可以了。

$("#second-list").sortable({
  axis: "y",
  handle: '.sortable-handle',
});

$(".removeNode").on("click", function() {
  $(this).closest("li").remove();
});

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

.sortable {
  list-style: none;
  padding: 0;
}

.sortable li {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  box-shadow: 0 1px 5px -2px rgba(0, 0, 0, 0.4);
  margin: 0.5em 0;
}

.sortable-handle {
  padding: 0.3em 0.5em;
  margin-right: 0.5em;
  cursor: ns-resize;
  color: #888;
  transition: color 0.3s, transform 0.3s;
}

.sortable-handle::before {
  content: "⋮⋮";
}

.sortable-handle:hover {
  color: #863da6;
  transform: scale(1.2);
}

.removeNode {
  margin-left: auto;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  background: #eee;
  border: 0;
  width: 2em;
  height: 2em;
  transition: background 0.3s, transform 0.3s;
}

.removeNode:hover {
  background: #fe0306;
  color: #fff;
  transform: scale(1.2);
}

.removeNode::after {
  content: "✕"
}

.sortable li.ui-sortable-helper {
  background: #fff;
  box-shadow: inset 4px 0 0 #863da6, 0 0.1rem 0.5rem rgba(0, 0, 0, 0.3);
}

.sortable li.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f0eefc;
  outline: 2px dashed #863da6;
  outline-offset: -4px;
  box-shadow: none;
}

<ul id="second-list" class="sortable">
  <li><span class="sortable-handle"></span> Boolean Field 1 <button class="removeNode" type="button" aria-label="Remove node"></button></li>
  <li><span class="sortable-handle"></span> Boolean Field 2 <button class="removeNode" type="button" aria-label="Remove node"></button></li>
  <li><span class="sortable-handle"></span> Boolean Field 3 <button class="removeNode" type="button" aria-label="Remove node"></button></li>
  <li><span class="sortable-handle"></span> Boolean Field 4 <button class="removeNode" type="button" aria-label="Remove node"></button></li>
  <li><span class="sortable-handle"></span> Boolean Field 5 <button class="removeNode" type="button" aria-label="Remove node"></button></li>
  <li><span class="sortable-handle"></span> Boolean Field 6 <button class="removeNode" type="button" aria-label="Remove node"></button></li>
  <li><span class="sortable-handle"></span> Boolean Field 7 <button class="removeNode" type="button" aria-label="Remove node"></button></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

JQuery 可拖动鼠标光标偏移

JQuery draggable mouse cursor offset

jquery

jquery-ui-draggable

jquery-ui-droppable