Menu
Maybe I don't understand how clone works with sortable, but here is what I would like to do.
When sorting an item I would like a clone of the item I am dragging remain until I stop drop the item in its new position.
Here's the code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
.sort { width: 150px; }
.ui-state-highlight { background-color: #000; height:2px; }
</style>
</head>
<body>
<div>
<ul class="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$('.sort').sortable({
helper: 'clone',
placeholder: 'ui-state-highlight',
opacity: '.5'
})
})
</script>
</body>
</html>
Thanks in advance for the help!
411
When you use the clone option, the original item is hidden with style="display: none" when you start dragging. You could attach a handler to the sort event (or whatever event hides the original item) to re-show it. Everything should work for you then.
P.S. I used Firebug to look at what was happening to the original element. If you're not using it you really ought to be!
185
Its just one way to hack it. You can lead from here on. Change your config as below.
$('.sort').sortable({
helper: 'clone',
placeholder: 'ui-state-highlight',
opacity: '.5',
start: function(event, ui) {
$('.sort').find('li:hidden').show();
}
})
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
