Is it possible to detect mouse grabs in addition to changing the cursor on hover?
For example, try dragging the items in the following code snippet. The goal is to change the cursor to cursor: move if an element is being moved.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
#sortable li:hover {
cursor: pointer;
}
#sortable li:mousedrag {
cursor: move;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable" class="connectedSortable">
<li class="ui-state-default" value="1">Item 1</li>
<li class="ui-state-default" value="2">Item 2</li>
<li class="ui-state-default" value="3">Item 3</li>
<li class="ui-state-default" value="4">Item 4</li>
<li class="ui-state-default" value="5">Item 5</li>
</ul>
<button id="save">Save</button>
</body>
</html>I am looking for a way to achieve something like this:
#sortable li:mousedrag {
cursor: move;
}