jQuery UI & Droppable: Create Targets for Draggable Elements

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

jQuery UI Droppable – Default functionality

Enable any DOM element to be droppable, a target for draggable elements.

Once the event drop is fired by moving the draggable box to the drop box, the class ui-state-highlight will be added to the target box.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Droppable - Default functionality</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: 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();
            $('#droppable').droppable({
                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>Drop here</p>
</div>

</body>
</html>
Try The Code

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: Accept

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

jQuery UI Droppable – Accept

Specify using the accept option which element (or group of elements) is accepted by the target droppable.

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

        #draggable, #draggable-nonvalid {
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }
    </style>
    <script>
        $(function () {
            $('#draggable, #draggable-nonvalid').draggable();
            $('#droppable').droppable({
                accept: '#draggable',
                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-nonvalid' class='ui-widget-content'>
    <p>I'm draggable but can't be dropped</p>
</div>

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

<div id='droppable' class='ui-widget-header'>
    <p>accept: '#draggable'</p>
</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: 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