Menu
Im using this .sortable function on my list. My problem is that I want it to show the move cursor when the drag and drop is being used, and the pointer cursor only on hover. I have my css calling the cursor:pointer on hover, but it does not seem to show the move cursor at all. Everything else works fine. Code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>
<link rel="stylesheet" href="blah.css" type="text/css" />
<script type="text/javascript" charset="UTF-8">
$(document).ready(function()
{
$("#sortable").sortable({
/*helper: 'clone', Tried this =(*/
distance: 5,
delay: 300,
opacity: 0.6,
cursor: 'move',
update: function() {}
});
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>
</body>
</html>
Seperate css doc contains:
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.1em; line-height: 18px; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
/* HERE'S THE IMPORTANT STUFF! */
#sortable li:hover {
cursor: pointer;
}
#sortable li.ui-sortable-helper {
cursor: move;
}
Any help would be greatly appreciated. Thanks in advance. =)
Perhaps a little more information. Its a db populated list from a while statement. each list item is a link, so I want it to display the {cursor: Pointer;} option. But when it is dragged i need it to display the {cursor: move;}. I would have thought that the code above would do it but its not working. I confused myself with the first post so thought i would clarify this a little better.
287
The problem seems to be, that your CSS setting is used across all states.
You can get around this by setting the cursor for "dragging" as well via CSS:
#contentLeft li:hover {
cursor: pointer;
}
#contentLeft li.ui-sortable-helper{
cursor: move;
}
Here's an example: http://jsfiddle.net/mWYEH/
151
Found a less blunt way to do it:
#contentLeft li:not(.ui-sortable-helper) {
cursor: pointer;
}
For those who are using a handle to start dragging:
.ui-sortable-handle {
cursor: pointer
}
.ui-sortable-helper .ui-sortable-handle {
cursor: move
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
