Problem with multiple droppable's

Hi all,

I recently found out about jquery and I have already been experimenting a bit with jquery (draggable, float in etc.) but now I'm trying to actually do something with it I've encountered a problem. I'm making a sort of opening for my schoolproject-site where the user has to drag draggable divs to make the picture complete and enter the website (a bit like a jigsaw puzzle). The problem is, when you drag for example the right bottom tile onto the left top corner it does not see the piece as the wrong piece. Has anyone an idea how to solve this?

html code:

<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="droppable_jquery.css">

    <script>
    $(function() {
        $( "#draggable_l_t" ).draggable();
        $( "#draggable_r_t" ).draggable();
        $( "#draggable_l_b" ).draggable();
        $( "#draggable_r_b" ).draggable();

        $( "#droppable_l_t" ).droppable({
            drop: function( event, ui ) {
                $( this )
                        .html( "The Top Left Corner is placed at the right place!" );
            }
        });

        $( "#droppable_r_t" ).droppable({
            drop: function( event, ui ) {
                $( this )

                        .html( "The Top Right Corner is placed at the right place!" );
            }
        });

        $( "#droppable_l_b" ).droppable({
            drop: function( event, ui ) {
                $( this )
                        .html( "The Bottom Left Corner is placed at the right place!" );
            }
        });
        $( "#droppable_r_b" ).droppable({
            drop: function( event, ui ) {
                $( this )
                        .html( "The Bottom Right Corner is placed at the right place!" );
            }
        });
    });
    </script>

</head>
<body style="font-size:62.5%;">

<div id="droppable_l_t"></div>
<div id="draggable_l_t"><img src= intro_left_top_corner.png> </img></div>
<br>
<div id="droppable_r_t"></div>
<div id="draggable_r_t"><img src= intro_right_top_corner.png> </img></div>
<br>
<div id="droppable_l_b"></div>
<div id="draggable_l_b"><img src= intro_left_bottom_corner.png> </img></div>
<br>
<div id="droppable_r_b"></div>
<div id="draggable_r_b"><img src= intro_right_bottom_corner.png> </img></div>
</body>
</html>

css code:

#draggable_l_t
{
z-index:+1;
width: 150px;
height: 150px;
background: silver;
padding: 0px;
}

#droppable_l_t
{
position: absolute;
top: 10px;
left: 250px;
width: 150px;
height: 150px;
background: gray;
color: white;
padding: 0px;
}

#draggable_r_t
{
z-index:+1;
width: 150px;
height: 150px;
background: silver;
padding: 0px;
}

#droppable_r_t
{
position: absolute;
top: 10px;
left: 401px;
width: 150px;
height: 150px;
background: gray;
color: white;
padding: 0px;
}

#draggable_l_b
{
z-index:+1;
width: 150px;
height: 150px;
background: silver;
padding: 0px;
}

#droppable_l_b
{
position: absolute;
top: 161px;
left: 250px;
width: 150px;
height: 150px;
background: gray;
color: white;
padding: 0px;
}

#draggable_r_b
{
z-index:+1;
width: 150px;
height: 150px;
background: silver;
padding: 0px;
}

#droppable_r_b
{
position: absolute;
top: 161px;
left: 401px;
width: 150px;
height: 150px;
background: gray;
color: white;
padding: 0px;
}

The website is also here.

Topic Participants
friso98490

Problem with multiple droppable's

Problem with multiple droppable's

Topic Participants

friso98490