Drag and Drop images using jQuery in ASP.Net

   <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        img
        {
            height: 100px;
            width: 100px;
        }
        #dvDest
        {
            border: 5px solid #ccc;
            padding:5px;
            height: 100px;
            width: 200px;
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
    <link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
    <script type="text/javascript">
        $(function () {
            $("#dvSource img").draggable({
                drag: function (event, ui) {
                    ui.helper.css("opacity", "0.7");
                }
            });
            $("#dvDest").droppable({
                drop: function (event, ui) {
                    if ($("#dvDest img").length == 0) {
                        $("#dvDest").html("");
                    }
                    ui.draggable.css("position", "static");
                    ui.draggable.css("opacity", "1");
                    $("#dvDest").append(ui.draggable);
                }
            });
        });
    </script>
    <div id="dvSource">
        <img alt="" src="http://aspsnippets.com/demos/sampleimages/Jellyfish.jpg" />
        <img alt="" src="http://aspsnippets.com/demos/sampleimages/Koala.jpg" />
    </div>
    <hr />
    <div id="dvDest">
        Drop here
    </div>