Greedy - disabled hoverclass bug #2253
Comments
|
Thanks for the report. I moved the issue to a correct place, i.e. the jQuery UI bug tracker. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer? Also, please attach a runnable test case. |
|
The issue both exists in 1.11.2 and 1.13.3 HTML: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h1 id="header"></h1>
<div id="node_1" class="node">
<span class="node-text">
First Node
</span>
<div class="children">
<div id="node_2" class="node">
<span class="node-text">
Second Node
</span>
<div class="children">
<div id="node_3" class="node">
<span class="node-text">
Third Node
</span>
</div>
<div id="node_4" class="node">
<span class="node-text">
Fourth Node
</span>
<div class="children">
<div id="node_5" class="node">
<span class="node-text">
Fifth Node
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js" integrity="sha256-sw0iNNXmOJbQhYFuC9OF2kOlD5KQKe1y5lfBn4C9Sjg=" crossorigin="anonymous"></script>
<script src="src/script.js"></script>
</body>
</html>JS: $('.node').draggable({
zIndex: 10,
helper: 'clone',
});
$('.node').droppable({
greedy: true,
hoverClass: 'drop-target',
disabled: true,
});
$('#node_1, #node_4').droppable('enable');CSS: body {
background: white; /* Make it white if you need */
color: white;
padding: 0 24px;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.node {
background-color: #101e2a;
cursor: pointer;
border: 1px solid gray;
white-space: nowrap;
padding: 5px;
width: min-content;
height: min-content;
margin: 5px;
}
.children {
padding-left: 10px !important;
}
.drop-target {
border: 1px dashed gray !important;
background: yellow !important;
}
.drop-target > .node-text {
color: black;
}Online sandbox: |
|
Thanks for the info & the test case. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex and contain tests. Also, could you describe in more detail what exactly to do in the sandbox to see the issue? |
JavaScript.Playground.webm |
|
Thanks, I think I understand now. Still, my note above stands. |
Description
HoverClass is not being removed from a parent if there is a disabled droppable between the greedy droppable and the enabled parent. See the image:
Link to test case
The text was updated successfully, but these errors were encountered: