jQuery UI Sortable: Firefox :active issue
Pseudo class :active gets suppressed by ui.sortable in Firefox
by TJ VanToll
HTML
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS
.sortable {
list-style: none;
padding: 0;
}
.sortable li {
padding: 0.5em 1em;
margin: 1em;
border: thin solid black;
cursor: pointer;
}
.ui-sortable-active {
background: orange;
cursor: move;
}
JavaScript
$.widget( "ui.sortable", $.ui.sortable, {
_create: function() {
this._super();
this._on( this.element, {
"mousedown > *": function( event ) {
$( event.target ).addClass( "ui-sortable-active" );
},
"sortstop": function( event, ui ) {
$( ui.item ).removeClass( "ui-sortable-active" );
}
});
}
});
$( ".sortable" ).sortable();