JQuery 可拖动鼠标光标偏移

问题描述

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

问题：

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

对于列表的每个元素之间的这个，我有一个高度 = 0px 的 droppable，当我的可拖动重叠在这个级别时我修改为 20px 没问题，担心来自这样一个事实，当我调整 droppable 的大小时，鼠标光标从可拖动转移。

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

如果有人建议这种转变可能来自哪里，我已经测试了选项 cursorAt 没有成功

解决方法

使用以下最小的 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.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.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>