jQuery Disable/Enable status of Droppable/Draggable

Question

I tired to explain this yesterday, but I don't think people understood it. I posted up the code and example at http://www.whatevercorp.com/problem/

I haven't worked with jQuery in a while, but have search everywhere for a disable('enable')/disable example or a way to change droppable status on the fly.

Basically I have 2 questions:

1. How can I change or limit the .drop class to only accept 1 item in the div If you look at the example (whatevercorp.com/problem/) you will see that you can drop 2 items within a div and it gets funky. I just want to limit this as it's a gallery of photos.

2. How can I keep track of all the droppble items within the table. I want users to be able to move them around once they drop them in the boxes, but also keep track of each move. I looked into serialize, but need some pointers.

Hopefully that clears it up and I can get this tool up and running. Thanks for your help in advance!

Answer 1

To keep multiple images from dropping into one div.drop, try this:

$(".drop").droppable({
    accept: ".photo",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) {
        //returning false will cancel the drop
     if ($(this).children('img').length > 0) return false;

       $(this).append(ui.draggable); 
     $('#output').append($(ui.draggable).attr('src')+"<br />");    
     $('#output').append($(this).attr("id")+"<br />");
    }
});

To keep track of their moves, you're probably going to have to work with a global variable that gets set inside that drop function above.