Draggable Boxes

by ChrisStanyon

HTML

<p id="position">Drag the red square</p>
<div id="mainArea">
<div class="icon"></div>
</div>

CSS

#mainArea { width: 200px; height: 200px; background-color: green; clear:both; position:relative; }
.icon { width: 10px; height: 10px; background-color: red; float:left; margin:0px; }

JavaScript

$(".icon").draggable({
    revert: 'invalid',
    revertDuration: 200,
    containment: "#mainArea"
});

$( "#mainArea" ).droppable({
    tolerance: "fit",
    drop: function( event, ui ) {
        $('#position')
            .text("Top:" + ui.position.top + " | Left: " + ui.position.left)
    }
});