JQuery Droppable, snap, revert questions

JQuery Droppable, snap, revert questions

Hi there. I'm playing with the droppables/draggable elements of the JQuery api. However I have ran into two problems. Basically i'd like to have a list of images on one side that can be dragged to several containers on the other side. For example a dog image can only be accepted to be dropped into a dog container whilst a sheep image can only be dropped int o a sheep container. If these are dropped into  the right containers then they snap into the center of the accepting container or else revert back to the original position. However, I don't appear to be able to drop items into specific boxes (without them always reverting) and I also don't know how to snap to the center of an accepting container. Would be grateful if somebody can help?
 
 
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery Drag And Drop by Jhoy Imperial</title>



    <script src="jquery.js"></script>
    <script src="ui.core.js"></script>
    <script src="ui.draggable.js"></script>
    <script src="ui.droppable.js"></script>


    <style type="text/css">
        body{
            font:normal 12px Verdana;
            margin:0;
            padding:0;
        }
        .wrap{
            width:600px;
            position:relative;
            padding:10px;
        }
        .sourcearea{
            width:150px;
            float:left;
        }
        .items {
            z-index: 100;
        }
        .droparea {
            float:right;
            background-color: #EFEFE0;
            border: 1px solid #EFEFE0;
            width: 100px;
            min-height: 100px;
            border:1px solid;
        }
        .droparea img{
            margin:5px;
        }
        .dropareahover {
            background-color:#EFD2A4;
            border-color:#DFA853;
        }
        .summary{
            padding:10px;
        }
        .summary span{
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sourcearea">
            <span class="draggable" id="itemsheep"><img src="sheep.jpg" width="100"></span>
            <span class="draggable" id="itemdog"><img src="dog.jpg" width="100"></span>
        </div>
        <div class="droparea" id="dropsheep">SHEEP DROP</div>
        <div class="droparea" id="dropdog">DOG DROP</div>
    </div>
    <script>
   $(document).ready(function() {
    $("#itemsheep").draggable({
      snap: '#dropsheep',
      revert: true
  });
    $("#itemdog").draggable({
      snap: '#dropdog',
      revert: true
  });
    $("#dropsheep").droppable({
    accept: "#itemsheep",
     drop: function(ev, ui) {
       //... logic to accept the drop ...
       var dropOk = true; //harcoded for simplicity
       if (dropOk){
     alert("sheep dropped success");
     //drop img in and snap without reverting
    }else{
     alert("dropped failed");
     //revert effect will be executed (as planned)
    }
   }








































































    });
    $("#dropdog").droppable({
    accept: "#itemdog",
     drop: function(ev, ui) {
       //... logic to accept the drop ...
       var dropOk = true; //harcoded for simplicity
       if (dropOk){
     alert("dog dropped success");
     //drop img in and snap without reverting
    }else{
     alert("dropped failed");
     //revert effect will be executed (as planned)
    }
   }
    });














   });


    </script>
</body>
</html>