Highlight a droppable area on hover using jquery ui

The example contains multiple droppable div elements. You can drag items from the list and can drop to any of these div. When you are dragging an element and it is hovered over a droppable div then that div will highlighted.

See the demo:

Demo

Drag from here

Item A
Item B
Item C
Item D
Item E
Item F
Item G
Item H
Item I

Drop here

Source Code

Below is the complete code for highlighting the droppable area on the hover:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .ui-drop-hover
        {
            background-color: #FFFF55 !important;
            border: 2px solid #bbb;
        }
        #dragdiv
        {
            width: 180px;
            height: 400px;
            float: left;
        }
        .dropdiv
        {
            width: 150px;
            height: 150px;
            background-color: #FFFFD4;
            float: right;
            border: 1px solid #f2f2f2;
        }
        #dropdiv li
        {
            padding-left: 10px;
        }
        #maindiv
        {
            width: 600px;
            height: 450px;
            border: 2px solid #bbb;
        }
    </style>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 
    <script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
 
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"
        type="text/javascript"></script>
 
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"
        type="text/javascript"></script>
 
    <script type="text/javascript">
        $(function() {
            $("#dragdiv li").draggable({
                appendTo: "body",
                helper: "clone",
                cursor: "move",
                revert: "invalid"
            });
 
            initDroppable($(".dropdiv"));
            function initDroppable($elements) {
                $elements.droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-drop-hover",
                    accept: ":not(.ui-sortable-helper)",
 
                    over: function(event, ui) {
                        var $this = $(this);
                    },
                    drop: function(event, ui) {
                        var $this = $(this);
                        $("<li></li>").text(ui.draggable.text()).appendTo(this);
 
                    }
                });
            }
        });
    </script>
 
</head>
<body>
    <div id="maindiv">
        <div id="dragdiv">
            <h3>
                <span>Drag from here</span></h3>
            <ul id="allItems" runat="server">
                <li id="node1">Item A</li>
                <li id="node2">Item B</li>
                <li id="node3">Item C</li>
                <li id="node4">Item D</li>
                <li id="node5">Item E</li>
                <li id="node6">Item F</li>
                <li id="node7">Item G</li>
                <li id="node8">Item H</li>
                <li id="node9">Item I</li>
            </ul>
        </div>
        <h3>
            <span>Drop here</span></h3>
        <div style="width: 350px; float: left">
            <div class="dropdiv">
            </div>
            <div class="dropdiv">
            </div>
            <div class="dropdiv">
            </div>
            <div class="dropdiv">
            </div>
        </div>
    </div>
</body>
</html>