Menu
I'm trying to use Sortable to reorder the items of a list. I've got a handle for each item of the list, which has :hover and :active css cursor settings, so that the cursor changes when the user mouses over the handles (and again when dragging).
<html>
<head>
<style>
span { width: 20px; background: red }
span:hover { cursor: -moz-grab; }
span:active { cursor: -moz-grabbing; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function(){
$('#sortable').sortable({ handle: 'span' });
$('#sortable span').disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li><span>grab 0 here</span> I'm 0!</li>
<li><span>grab 1 here</span> I'm 1!</li>
<li><span>grab 2 here</span> I'm 2!</li>
<li><span>grab 3 here</span> I'm 3!</li>
<li><span>grab 4 here</span> I'm 4!</li>
<li><span>grab 5 here</span> I'm 5!</li>
<li><span>grab 6 here</span> I'm 6!</li>
<li><span>grab 7 here</span> I'm 7!</li>
</ul>
</body>
</html>
The problem is that the :active cursor stops working. I'm not sure why, it works when I don't use sortable, but afterwards, when I pop it up in firebug, I can see that the :hover cursor is being applied, but no shift to :active.
(for simplicity, I'm using -moz-grab and -moz-grabbing in my above example, which don't work in all browsers).
Any ideas what might be going wrong?
301
In this article, we will learn how to use the jQuery UI Sortable handle Option. Using this option, we can use it to restrict the sort start to click to the specified element. The handle option takes a Selector or Element value and the syntax is as follows. var handle = $ ( ".selector" ).sortable ( "option", "handle" );
ui-sortable: The sortable element. ui-sortable-handle: The handle of each sortable item, specified using the handle option. By default, each sortable item itself is also the handle. ui-sortable-placeholder: The element used to show the future position of the item currently being sorted.
Defines the cursor that is being shown while sorting. Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }. Initialize the sortable with the cursorAt option specified:
If sortable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option: ui-sortable: The sortable element. ui-sortable-handle: The handle of each sortable item, specified using the handle option. By default, each sortable item itself is also the handle.
A bit late answer but you can use the jQuery UI sortable option cursor
$('#sortable').sortable({
cursor: "grabbing"
});
So you can avoid extra jquery and css.
<html>
<head>
<style>
span { width: 20px; background: red }
span:hover { cursor: -moz-grab; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function(){
$('#sortable').sortable({
handle: 'span',
cursor: 'grabbing'
});
$('#sortable span').disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li><span>grab 0 here</span> I'm 0!</li>
<li><span>grab 1 here</span> I'm 1!</li>
<li><span>grab 2 here</span> I'm 2!</li>
<li><span>grab 3 here</span> I'm 3!</li>
<li><span>grab 4 here</span> I'm 4!</li>
<li><span>grab 5 here</span> I'm 5!</li>
<li><span>grab 6 here</span> I'm 6!</li>
<li><span>grab 7 here</span> I'm 7!</li>
</ul>
</body>
</html>
<html>
<head>
<style>
.grab {
cursor: hand;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.grabbing {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).on('mousedown mouseup', '.grab, .grabbing', function(event) {
$(this).toggleClass('grab').toggleClass('grabbing');
});
$('#drag').draggable();
});
</script>
</head>
<body>
<div id="drag" class="grab" style="width: 200px;height:200px;">Grab Me</div>
</body>
</html>No need for seperate handlers with the new .on/.off jQuery functions
34
Ok, I came up with a hack to solve my problem. It's hackish, so if anyone's got something better, let me know.
Basically, I ditched the :active in favor of a custom class that is added on mousedown and removed on mouseup.
<html>
<head>
<style>
span {
width: 20px;
background: red
}
span:hover {
cursor: -moz-grab;
}
.grabbed:hover {
cursor: -moz-grabbing;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#sortable').sortable({
handle: 'span'
});
$('#sortable span').disableSelection();
$('#sortable span').mousedown(function() {
$(this).addClass('grabbed')
});
$('#sortable span').mouseup(function() {
$(this).removeClass('grabbed')
});
});
</script>
</head>
<body>
<ul id="sortable">
<li><span>grab 0 here</span> I'm 0!</li>
<li><span>grab 1 here</span> I'm 1!</li>
<li><span>grab 2 here</span> I'm 2!</li>
<li><span>grab 3 here</span> I'm 3!</li>
<li><span>grab 4 here</span> I'm 4!</li>
<li><span>grab 5 here</span> I'm 5!</li>
<li><span>grab 6 here</span> I'm 6!</li>
<li><span>grab 7 here</span> I'm 7!</li>
</ul>
</body>
</html>If you are using jquery ui, the easiest way is to use css classes:
.draggable-item {
cursor: pointer; // Fallback
cursor: -webkit-grab;
}
draggable-item:active,
draggable-item.ui-draggable-dragging {
cursor: -webkit-grabbing;
}
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
