Question

I have the following simple code:

http://jsfiddle.net/QUBCq/

You can see that I have 3 spaces where items can be dropped and any of the 6 items can be dropped into the three spaces.

First question – I place an item in one the spaces – if I remove it the spacechanges to Dropped!, what I’d like is to then have it revert back to Drop here.

Second question – if this was part of a form, how would I bind the items places in each of the three spaces to a .PHP form to be saved to a database.

Third question – Can you stop more than 1 item being placed into a space? If so, how?

Apologies, I know this is basic stuff but I’m new to jQuery.

NOTE: I’m using this to allow a user to select their Top 3 items.

Cheers,

H.

Answer 1

Hi The answer to your first question is as follows

 $( "#droppable1" ).on( "dropout", function( event, ui ) {
                 $( "#droppable1" ).removeClass("ui-state-highlight").find( "p" )
                        .html( "Drop Here" );
   });

For the third question you can refer this SO thread
jquery droppable -> avoid multiple drops of the same object

Hope this helps.