views:

13

answers:

0

I'm in the process of trying to create a series of thumbnail images, each with it's own li, that are .draggable() and .droppable() and rearrange. I have many questions about this and am doing my best to find my own solutions but I've run into an issue.

I'd like to have all of the lis set to draggable on $(document).ready. Then, once one is selected and starts dragging, I'd like to have all of the other li (it's siblings) no longer be draggable but all become droppable. Then, once it's dropped, or dragging stops and the location is reverted, I'd like them all to switch back to draggable. Sounds simple enough, eh?

Here's the code not working for me:

$("#list li").draggable({ 
    revert: 'invalid',
    snap: true,
    snapMode: 'inner',
    opacity: 0.5,
    start: function(event, ui) {$(this).siblings().draggable( 'option', 'enabled', false).droppable( 'option', 'enabled', true)},
    stop: function(event, ui) {$(this).siblings().droppable( 'option', 'enabled', false).draggable( 'option', 'enabled', true)},
    }); 

The HTML is just a basic ul with a few li.

Thanks!