How to drag div into boxes

Question

I have the follow code that allows me to drag a div into 3 boxes.
I am trying to get the draggable div to fit in the box from onces you dropped on to it, Because at the moment it will drop onit it but it allows it to be dropped anywhere on the window how can i stop that from happening?

 <div id="drop1" class="dropzone">Accepts the element if fits inside</div>
 <div id="drop2" class="dropzone">Accepts the element if intersects</div>
 <div id="drop3" class="dropzone">Accepts the element if pointer hovers</div>
 <div id="drag" class="dropaccept">Drag me</div>
 <script type="text/javascript">
  $(document).ready(
function()
{
    $('#drag').Draggable();
    $('#drop1').Droppable(
        {
            accept :        'dropaccept', 
            activeclass:    'dropactive', 
            hoverclass:     'drophover',
            tolerance:      'intersect'
        }
    );
    $('#drop2').Droppable(
        {
            accept :        'dropaccept', 
            activeclass:    'dropactive', 
            hoverclass:     'drophover',
            tolerance:      'intersect'
        }
    );
    $('#drop3').Droppable(
        {
            accept :        'dropaccept', 
            activeclass:    'dropactive', 
            hoverclass:     'drophover',
            tolerance:      'intersect'
        }
    );
}
 );
</script>

Answer 1

What you have shouldn't be working, it should be .draggable() and .droppable() (lower-case). For the other piece, specify the revert option, like this:

$('#drag').draggable({ revert: 'invalid' });

Also accept is a selector, so change it to .dropaccept like this:

$('#drop1').droppable(
    {
        accept :        '.dropaccept', 
        activeClass:    'dropactive', 
        hoverClass:     'drophover',
        tolerance:      'intersect'
    }
);

Note the casing changes on the other properties as well, JavaScript is case sensitive!

You can test it out here.