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

jQuery UI & Draggable: Visual Feedback

This entry is part 5 of 11 in the series jQuery UI Draggable

jQuery UI Draggable – Visual feedback

Provide feedback to users as they drag an object in the form of a helper. The helper option accepts the values ‘original’ (the draggable object moves with the cursor), ‘clone’ (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper’s transparency with the opacity option.

To clarify which draggable is in play, bring the draggable in motion to front. Use the zIndex option to set a higher z-index for the helper, if in play, or use the stack option to ensure that the last item dragged will appear on top of others in the same group on drag stop.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable - 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, #draggable3, #set div {
            width: 90px;
            height: 90px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;
        }

        #draggable, #draggable2, #draggable3 {
            margin-bottom: 20px;
        }

        #set {
            clear: both;
            float: left;
            width: 368px;
            height: 120px;
        }

        p {
            clear: both;
            margin: 0;
            padding: 1em 0;
        }
    </style>
    <script>
        $(function () {
            $("#draggable").draggable({ helper: "original" });
            $("#draggable2").draggable({ opacity: 0.7, helper: "clone" });
            $("#draggable3").draggable({
                cursor: "move",
                cursorAt: { top: -12, left: -20 },
                helper: function (event) {
                    return $("<div class='ui-widget-header'>I'm a custom helper</div>");
                }
            });
            $("#set div").draggable({ stack: "#set div" });
        });
    </script>
</head>
<body>

<h3 class="docs">With helpers:</h3>

<div id="draggable" class="ui-widget-content">
    <p>Original</p>
</div>

<div id="draggable2" class="ui-widget-content">
    <p>Semi-transparent clone</p>
</div>

<div id="draggable3" class="ui-widget-content">
    <p>Custom helper (in combination with cursorAt)</p>
</div>



<div id="set">
    <h3 class="docs">Stacked:</h3>
    <div class="ui-widget-content">
        <p>We are draggables..</p>
    </div>

    <div class="ui-widget-content">
        <p>..whose z-indexes are controlled automatically..</p>
    </div>

    <div class="ui-widget-content">
        <p>..with the stack option.</p>
    </div>
</div>


</body>
</html>
Try The Code

With the stack option, the last one dragged will always be on top of the others.