As the title describes most of the problem. Here is the example code that works as expected in Firefox. Could someone provide a workaround or fix? In action
JavaScript
$(function()
{
$('table thead').sortable({
items: 'th',
containment: 'document',
helper: 'clone',
cursor: 'move',
placeholder: 'placeHold',
start: function(e, ui) {
$overlay=$('<div>').css({ position: 'fixed', left: 0, top: 0, backgroundColor: 'black', opacity: 0.4, width: '100%', height: '100%', zIndex: 500 }).attr('id','sortOverlay').prependTo(document.body);
$(this).parent().css({ position: 'relative', zIndex: 1000});
},
stop: function(e, ui){
$('#sortOverlay').remove();
$(this).parent().css({ position: 'static' });
}
});
});
CSS
<style type="text/css">
table {
background-color: #f3f3f3;
}
table thead {
background-color: #c1c1c1;
}
.placeHold {
background-color: white;
}
</style>
HTML
<table>
<thead><th>th1</th><th>th2</th><th>th3</th><th>th4</th></thead>
<tbody>
<tr>
<td>content</td><td>content</td><td>content</td><td>content</td>
</tr>
</tbody>
</table>
