DRAGGABLE - Test Case Boilerplate

Fork this way...

by bizamajig

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 item = $(ui.helper);
            var objectid = item.attr('id');
            
            var cloned = $(item.clone());
            cloned.attr('id','marker'+(sm++));
            cloned.css({position:"absolute"});
            objectid = cloned.attr('id');
            cloned.draggable({
                containment: '#map',
                //cursor: 'move',
                snap: '#map',
                opacity: 0.7
            });
            cloned.bind("contextmenu",function(e){    cloned.remove(); return false; });
            $(this).append(cloned);
            
            var offsetXPos = parseInt(ui.offset.left - $(this).offset().left);
            var offsetYPos = parseInt(ui.offset.top - $(this).offset().top);
            $(".console").html("Dragged "+objectid+" to ("+offsetXPos+","+offsetYPos+")");

        }
             
     });

});