SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
 <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>

CSS

div { border: solid 1px #ddd; width: 100px; height: 100px; background: #fff }
.drophover { background: #eee; }
#drag { width: 70px; height: 70px; border-color: #990000; background: #ffeeee; }

JavaScript

$(document).ready(function() {
    $('#drag').draggable({ revert: 'invalid' });
    $('#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'
        }
    );
}
 );