drag & drop color box

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>drag & drop</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
div { width:200px; height:200px; margin:5px; border:1px solid #000; float:left;}
.drop { font-size:2em; text-align:center; line-height:200px;}
.clear { clear:both; }
</style>
</head>
<body>
<div id="red" class="drag"></div>
<div id="green" class="drag"></div>
<div id="blue" class="drag"></div>
<p class="clear"></p>
<div title="red" class="drop">red color</div>
<div title="green" class="drop">green color</div>
<div title="blue" class="drop">blue color</div>
<script>
$(document).ready(
    function(){
        $(".drag").each(
            function(){
                var bg = $(this).attr("id");
                $(this).css("background-color",bg);
            }
        );
    }
);
$(function(){
    $(".drag").draggable({
        start:function(){
            $(".drag").css("z-index",10);
            $(this).css("z-index", 100);
            $(this).draggable( "option", "revert", true );
        },
        revert:true
    });
});
$(function(){
    $(".drop").droppable({
        drop:function(event, ui){
            var droptitle = $(this).attr("title");
            var dragid = ui.draggable.attr("id");
            if(droptitle == dragid) {
                ui.draggable.draggable( "option", "revert", false );
                var droppableOffset = $(this).offset();
                var x = droppableOffset.left + 1;
                var y = droppableOffset.top + 1;
                ui.draggable.offset({ top: y, left: x });
            }
        }
    });
});
</script>
</body>
</html>