I am currently utilizing the Nestable JS library and have a list of nestable items in my tree. I am trying to implement a cursor: pointer when hovering over them and a cursor: move when dragging. However, I am facing issues in getting this functionality to work properly.
I have noticed a similar issue in jQuery UI, so I have created a small fiddle to demonstrate it:
$(document).ready(function () {
$(".sortableList").sortable({
revert: true,
cursor: 'move',
start: function(event) {
event.target.style.cursor = 'move';
},
stop: function(event) {
event.target.style.cursor = 'default';
}
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'move',
helper: 'clone',
revert: 'invalid'
});
});div {
border:1px solid red;
}
ul .ui-state-default li:hover {
cursor: pointer;
}
li:hover {
//cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div>Draggable source items
<ul>
<li class="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
</div>
<div>Sortable List 1
<ul class="sortableList">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>As per the CSS section, I have commented out the last rule because the cursor being set to pointer for :hover on those list items does not work. This issue is similar to what I am facing in Nestable JS.
Is there a way to prevent this overriding and have both cursors (pointer and move) work as intended depending on the situation?
Thank you.