5

I'd like to be able to drag an image into one of two containers (container 1 and container 2). From there, depending on which container the image was dropped to, I'd like to update that container with a database call (or just update a row in one of my tables).

I'd like to use http://jqueryui.com/demos/droppable/ to achieve this, but I'm not sure how to process the request, and how to get each container to listen for an event handler (dropping of the image).

I've drawn a really bad diagram below to explain what I mean:

Diagram of Droppable System

Orbling
  • 20,413
  • 3
  • 53
  • 64
bob_cobb
  • 2,229
  • 11
  • 49
  • 109

1 Answers1

5

The droppable demo shows exactly how to do this sort of thing.

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});

My own really basic demo → (updated)

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • This is so awesome. Thanks! Would the best way to store multiple votes be by using a cookie or should I just grab the ip and compare it to the last_ip voted in an additional row in my db? – bob_cobb Feb 27 '11 at 01:38
  • @bob_cobb: I'm not really sure of what you mean by "multiple votes." Is each user allowed to vote once per picture? Enforcing anonymous voting is hard, because IP addresses can change, and cookies can be (really easily) deleted. Typically this is solved with a user account system, where votes are associated with an account, rather than an IP address or (really, just don't use) cookies. – Matt Ball Feb 27 '11 at 01:43