Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<table style="text-align:center; ">
<tr><td colspan=2>Drag the blue marker into the area where red marker is. Notice the end position after the drag.Right click on blue markers to remove them.</td></tr>
<tr><td colspan="2"><div class="console">&nbsp;</div></td></tr>
<tr>
<td valign="top">
<div id="marker" style="background-color:blue;width:161px;height:31px;z-index:200;"></div>
</td>            
<td>
        
<div style="padding:20px 20px 20px 20px;text-align:center;background-color:grey;border:1px solid">
    <div id="map" style="background-color:white;position:relative;width:612px;height:792px;">
        <div id="marker0" style="background-color:red;position:absolute;left:100px;top:100px;width:161px;height:31px;z-index:300;opacity:0.7;" >
        </div>
    </div>
</div>

</td>
</tr>

</table>

JavaScript

var sm=1;
$(document).ready(function() {

     $("#marker").draggable({
        helper:'clone',
        containment: '#map',
        snap: '#map',
        opacity: 0.7
     });
     
    
     $("#map").droppable({
        drop: function(event,ui){
            var offset = ui.helper.offset();
            ui.helper.clone().appendTo( this ).offset( offset );
        }            
     });

});