views:

215

answers:

2

In the standard behavior demonstrated at http://jqueryui.com/demos/sortable/ when you drag an item in the list a placeholder element is displayed where the item would be dropped.

However, the original location of the item to be dropped is not indicated.

I would like to leave the original location visible until the drop, so that the visual feedback is analogous to the way the original is left in place for the "semi-transparent clone" option depicted at http://jqueryui.com/demos/draggable/#visual-feedback

Is there any way I can do this with sortable?

Thanks!

+1  A: 

The option helper: 'clone' will leave your original item in place, while creating a new DOM element that is actually dragged around by the mouse. (Additionally, you use the option opacity: 0.7 to create the "semi-transparent" effect on the helper.)

I'm not sure if you'll need this, but if using a clone doesn't remove the item automatically from the list, you can then use the remove event to delete the item that was dragged out from the DOM entirely.

Dominic Barnes
So, that's what I *thought* should happen with 'clone' -- but when I set helper: 'clone' the original still dissappears.So perhaps I should ask: what could I be missing?
brahn
Looking at this more carefully, with 'clone' the item still appears in the DOM. But it's not displayed. I modified the example that comes with the jquery-ui package to use the `helper: 'clone'` option, you can see it here:http://brahn.sqprod.com/jq/sortable-example.html
brahn
And, in fact (thanks to Firebug) it's now clear that (again, even with the `clone` option) the original is hidden via setting the style to `display: none`
brahn
+2  A: 

So one approach that seems to work (thought it's definitely a hack) is to pass the option

start: function (e, ui) { ui.item.show();}

which unhides the automatically hidden original (ui.item).

And, more generally, one can use the start function to modify the item.

brahn