如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。