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 & Droppable: A Simple Photo Manager

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

jQuery UI Droppable – Simple photo manager

In this simple photo manager, you can delete an image either by dragging it to the Trash or by clicking the trash icon.

You can “recycle” an image by dragging it back to the gallery or by clicking the recycle icon.

You can view larger image by clicking the zoom icon.  jQuery UI dialog widget is used for the modal window.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Droppable - Simple photo manager</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>
        #gallery {
            float: left;
            width: 65%;
            min-height: 12em;
        }

        .gallery.custom-state-active {
            background: #eee;
        }

        .gallery li {
            float: left;
            width: 96px;
            padding: 0.4em;
            margin: 0 0.4em 0.4em 0;
            text-align: center;
        }

        .gallery li h5 {
            margin: 0 0 0.4em;
            cursor: move;
        }

        .gallery li a {
            float: right;
        }

        .gallery li a.ui-icon-zoomin {
            float: left;
        }

        .gallery li img {
            width: 100%;
            cursor: move;
        }

        #trash {
            float: right;
            width: 32%;
            min-height: 18em;
            padding: 1%;
        }

        #trash h4 {
            line-height: 16px;
            margin: 0 0 0.4em;
        }

        #trash h4 .ui-icon {
            float: left;
        }

        #trash .gallery h5 {
            display: none;
        }
    </style>
    <script>
        $(function () {
            // there's the gallery and the trash
            var $gallery = $("#gallery"),
                    $trash = $("#trash");

            // let the gallery items be draggable
            $("li", $gallery).draggable({
                cancel: "a.ui-icon", // clicking an icon won't initiate dragging
                revert: "invalid", // when not dropped, the item will revert back to its initial position
                containment: "document",
                helper: "clone",
                cursor: "move"
            });

            // let the trash be droppable, accepting the gallery items
            $trash.droppable({
                accept: "#gallery > li",
                activeClass: "ui-state-highlight",
                drop: function (event, ui) {
                    deleteImage(ui.draggable);
                }
            });

            // let the gallery be droppable as well, accepting items from the trash
            $gallery.droppable({
                accept: "#trash li",
                activeClass: "custom-state-active",
                drop: function (event, ui) {
                    recycleImage(ui.draggable);
                }
            });

            // image deletion function
            var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";

            function deleteImage($item) {
                $item.fadeOut(function () {
                    var $list = $("ul", $trash).length ?
                            $("ul", $trash) :
                            $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);

                    $item.find("a.ui-icon-trash").remove();
                    $item.append(recycle_icon).appendTo($list).fadeIn(function () {
                        $item
                                .animate({ width: "48px" })
                                .find("img")
                                .animate({ height: "36px" });
                    });
                });
            }

            // image recycle function
            var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";

            function recycleImage($item) {
                $item.fadeOut(function () {
                    $item
                            .find("a.ui-icon-refresh")
                            .remove()
                            .end()
                            .css("width", "96px")
                            .append(trash_icon)
                            .find("img")
                            .css("height", "72px")
                            .end()
                            .appendTo($gallery)
                            .fadeIn();
                });
            }

            // image preview function, demonstrating the ui.dialog used as a modal window
            function viewLargerImage($link) {
                var src = $link.attr("href"),
                        title = $link.siblings("img").attr("alt"),
                        $modal = $("img[src$='" + src + "']");

                if ($modal.length) {
                    $modal.dialog("open");
                } else {
                    var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
                            .attr("src", src).appendTo("body");
                    setTimeout(function () {
                        img.dialog({
                            title: title,
                            width: 400,
                            modal: true
                        });
                    }, 1);
                }
            }

            // resolve the icons behavior with event delegation
            $("ul.gallery > li").click(function (event) {
                var $item = $(this),
                        $target = $(event.target);

                if ($target.is("a.ui-icon-trash")) {
                    deleteImage($item);
                } else if ($target.is("a.ui-icon-zoomin")) {
                    viewLargerImage($target);
                } else if ($target.is("a.ui-icon-refresh")) {
                    recycleImage($item);
                }

                return false;
            });
        });
    </script>
</head>
<body>

<div class="ui-widget ui-helper-clearfix">

    <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
        <li class="ui-widget-content ui-corner-tr">
            <h5 class="ui-widget-header">High Tatras</h5>
            <img src="http://jqueryui.com/resources/demos/droppable/images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
            <a href="http://jqueryui.com/resources/demos/droppable/images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
            <a href="http://jqueryui.com/resources/demos/droppable/link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete
                image</a>
        </li>
        <li class="ui-widget-content ui-corner-tr">
            <h5 class="ui-widget-header">High Tatras 2</h5>
            <img src="http://jqueryui.com/resources/demos/droppable/images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72">
            <a href="http://jqueryui.com/resources/demos/droppable/images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
            <a href="http://jqueryui.com/resources/demos/droppable/link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete
                image</a>
        </li>
        <li class="ui-widget-content ui-corner-tr">
            <h5 class="ui-widget-header">High Tatras 3</h5>
            <img src="http://jqueryui.com/resources/demos/droppable/images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72">
            <a href="http://jqueryui.com/resources/demos/droppable/images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
            <a href="http://jqueryui.com/resources/demos/droppable/link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete
                image</a>
        </li>
        <li class="ui-widget-content ui-corner-tr">
            <h5 class="ui-widget-header">High Tatras 4</h5>
            <img src="http://jqueryui.com/resources/demos/droppable/images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72">
            <a href="http://jqueryui.com/resources/demos/droppable/images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
            <a href="http://jqueryui.com/resources/demos/droppable/link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete
                image</a>
        </li>
    </ul>

    <div id="trash" class="ui-widget-content ui-state-default">
        <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
    </div>

</div>


</body>
</html>
Try The Code

jQuery UI & Droppable: Shopping Cart Demo

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

jQuery UI Droppable – Shopping Cart Demo

Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Droppable - Shopping Cart Demo</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>
        h1 {
            padding: .2em;
            margin: 0;
        }

        #products {
            float: left;
            width: 500px;
            margin-right: 2em;
        }

        #cart {
            width: 200px;
            float: left;
            margin-top: 1em;
        }

        /* style the list to maximize the droppable hitarea */
        #cart ol {
            margin: 0;
            padding: 1em 0 1em 3em;
        }
    </style>
    <script>
        $(function () {
            $('#catalog').accordion();
            $('#catalog li').draggable({
                appendTo: 'body',
                helper: 'clone'
            });
            $('#cart ol').droppable({
                activeClass: 'ui-state-default',
                hoverClass: 'ui-state-hover',
                accept: ':not(.ui-sortable-helper)',
                drop: function (event, ui) {
                    $(this).find('.placeholder').remove();
                    $('<li></li>').text(ui.draggable.text()).appendTo(this);
                }
            }).sortable({
                items: 'li:not(.placeholder)',
                sort: function () {
                    // gets added unintentionally by droppable interacting with sortable
                    // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                    $(this).removeClass('ui-state-default');
                }
            });
        });
    </script>
</head>
<body>

<div id='products'>
    <h1 class='ui-widget-header'>Products</h1>

    <div id='catalog'>
        <h2><a href='#'>T-Shirts</a></h2>

        <div>
            <ul>
                <li>Lolcat Shirt</li>
                <li>Cheezeburger Shirt</li>
                <li>Buckit Shirt</li>
            </ul>
        </div>
        <h2><a href='#'>Bags</a></h2>

        <div>
            <ul>
                <li>Zebra Striped</li>
                <li>Black Leather</li>
                <li>Alligator Leather</li>
            </ul>
        </div>
        <h2><a href='#'>Gadgets</a></h2>

        <div>
            <ul>
                <li>iPhone</li>
                <li>iPod</li>
                <li>iPad</li>
            </ul>
        </div>
    </div>
</div>

<div id='cart'>
    <h1 class='ui-widget-header'>Shopping Cart</h1>

    <div class='ui-widget-content'>
        <ol>
            <li class='placeholder'>Add your items here</li>
        </ol>
    </div>
</div>


</body>
</html>
Try The Code

jQuery UI & Droppable: Revert Draggable Position

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

jQuery UI Droppable – Revert draggable position

Return the draggable (or it’s helper) to its original location when dragging stops with the boolean revert option set on the draggable.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Droppable - Revert draggable position</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: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }

        #droppable {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }
    </style>
    <script>
        $(function () {
            $('#draggable').draggable({ revert: 'valid' });
            $('#draggable2').draggable({ revert: 'invalid' });

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

<div id='draggable' class='ui-widget-content'>
    <p>I revert when I'm dropped</p>
</div>

<div id='draggable2' class='ui-widget-content'>
    <p>I revert when I'm not dropped</p>
</div>

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

</body>
</html>
Try The Code

There are 3 states in the droppable box, once the target box has been successfully dropped, it will be changed to ui-state-highlight state.

jQuery UI & Droppable: Prevent Propagation

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

jQuery UI Droppable – Prevent propagation

When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the greedy option set to true prevents event propagation when a draggable is dropped on a child node (droppable).

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Droppable - Prevent propagation</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 {
            width: 100px;
            height: 50px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }

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

        #droppable-inner, #droppable2-inner {
            width: 170px;
            height: 60px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }
    </style>
    <script>
        $(function () {
            $('#draggable').draggable();

            $('#droppable, #droppable-inner').droppable({
                activeClass: 'ui-state-hover',
                hoverClass: 'ui-state-active',
                drop: function (event, ui) {
                    $(this)
                            .addClass('ui-state-highlight')
                            .find('> p')
                            .html('Dropped!');
                    return false;
                }
            });

            $('#droppable2, #droppable2-inner').droppable({
                greedy: true,
                activeClass: 'ui-state-hover',
                hoverClass: 'ui-state-active',
                drop: function (event, ui) {
                    $(this)
                            .addClass('ui-state-highlight')
                            .find('> p')
                            .html('Dropped!');
                }
            });
        });
    </script>
</head>
<body>

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

<div id='droppable' class='ui-widget-header'>
    <p>Outer droppable</p>

    <div id='droppable-inner' class='ui-widget-header'>
        <p>Inner droppable (not greedy)</p>
    </div>
</div>

<div id='droppable2' class='ui-widget-header'>
    <p>Outer droppable</p>

    <div id='droppable2-inner' class='ui-widget-header'>
        <p>Inner droppable (greedy)</p>
    </div>
</div>

</body>
</html>
Try The Code