Sortable "stickiness"
Sortable "stickiness"
I've been working with a series of ordered lists using the UI Sortable
tool, and have experienced a lot of "sticking" where the cursor cannot
seem to release a LI element after dragging it.
I've noticed this example does it on FF2 (Mac)
http://dev.jquery.com/view/trunk/ui/demos/ui.sortable.html
The example I've put together based on this code also has a certain
amount of this "stickiness", but occurs in Win IE6&7, and Win FF2
Has anyone experienced this, and more importantly know how to overcome
it?
My example code is as follows:
...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="admin/resources/js/
jquery.dimensions.js"></script>
<script type="text/javascript" src="admin/resources/js/ui.mouse.js"></
script>
<script type="text/javascript" src="admin/resources/js/
ui.sortable.js"></script>
<script type="text/javascript" src="admin/resources/js/
ui.sortable.ext.js"></script>
<style>
ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-
size: 10px; font-family: Arial; padding: 3px; }
</style>
</head>
<body>
<div class="playground">
<ul id="example1" style="cursor: hand; cursor: pointer; float:
left;">
<li id='ex_1'>Drag us</li>
<li id='ex_2'>around</li>
<li id='ex_3'>and change</li>
<li id='ex_4'>our</li>
<li id='ex_5'>positions</li>
</ul>
<ul id="example1_2" style="cursor: hand; cursor: pointer; float:
left;">
<li>Drag us</li>
<li>around</li>
<li>and change</li>
<li>our</li>
<li>positions</li>
</ul>
<ul id="example1_3" style="cursor: hand; cursor: pointer; float:
left;">
<li>Alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
<li>omega</li>
</ul>
<br style='clear: both;' />
</div>
<script>
$(window).bind("load",function(){
$("#example1").sortable({ connectWith: ['#example1_2',
'#example1_3'], connectWith: ['#example1_2'], revert: true,
containment: 'document', update: function(e,ui) { console.log($
(this).sortable('serialize')); } });
$("#example1_2").sortable({ connectWith: ['#example1','#example1_3'],
revert: true });
$("#example1_3").sortable({ connectWith: ['#example1','#example1_2'],
revert: true });
});
</script>
</body>
</html>