jQuery : drop an element in an element contained in an other one

Question

I have a problem with the droppable module in jQuery. I would like to drop a rectangle (with id="drag") on one of the rectangles which have the class "rect". But these green rectangles are IN a div witch has the id "body". I can't give you a picture but it look like that picture :

Algorithm needed for distributing rectangles evenly within another rectangle

But the pb is that when I do that it is ok I can see the message when I drop on the gray rect :

$(function(){

    $('#drag').draggable({});

});
$('#body').droppable({
    drop : function(){
        alert('Action terminée !'); // I can see the message !
    }

But when I do that... Nothing append :

$(function(){  
        $('#drag').draggable({});

    });
    $('.rect').droppable({ // Here is the difference
        drop : function(){
            alert('Action terminée !'); // I can't see the message !
        }

My question is why ? And how to do in order to do what I want ? Thanks a lot.

score 0 · Answer 1 · answered Jul 10 '14 at 08:36

Have you already tried to write both .draggable() and .droppable() into the $(function(){}), in other the words, the onDomReady Event? My first guess would be that .rect isn't existing the moment you're trying to make it a droppable, while #body does.

(PS: Would have commentend this instead of answered, but i'm quite new so my reputation isn't high enough to comment)

jQuery : drop an element in an element contained in an other one

1 Answers1