jQuery UI & Droppable: Visual Feedback

This entry is part 2 of 7 in the series jQuery UI Droppable

jQuery UI Droppable – Visual feedback

Change the droppable’s appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).

Use the hoverClass or activeClass options to specify respective classes.

When you drag on the box with feedback option, the target box will be highlighted.  This provides a hint to the user that the box should be dropped there in the target box.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Droppable - Visual feedback</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #draggable, #draggable2 {
            width: 90px;
            height: 90px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }

        #droppable, #droppable2 {
            width: 120px;
            height: 120px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }

        h3 {
            clear: left;
        }
    </style>
    <script>
        $(function () {
            $("#draggable").draggable();
            $("#droppable").droppable({
                hoverClass: "ui-state-hover",
                drop: function (event, ui) {
                    $(this)
                            .addClass("ui-state-highlight")
                            .find("p")
                            .html("Dropped!");
                }
            });

            $("#draggable2").draggable();
            $("#droppable2").droppable({
                accept: "#draggable2",
                activeClass: "ui-state-default",
                drop: function (event, ui) {
                    $(this)
                            .addClass("ui-state-highlight")
                            .find("p")
                            .html("Dropped!");
                }
            });
        });
    </script>
</head>
<body>

<h3>Feedback on hover:</h3>

<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

<h3>Feedback on activating draggable:</h3>

<div id="draggable2" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div id="droppable2" class="ui-widget-header">
    <p>Drop here</p>
</div>

</body>
</html>
Try The Code
Series Navigation<< jQuery UI & Droppable: Create Targets for Draggable Elements
jQuery UI & Droppable: Accept >>