JavaScript Droppable Getting Started

Home >Shield UI Documentation >Droppable >JavaScript >JavaScript Droppable Getting Started

The Droppable utility allows you to have droppable targets for any Draggable elements initialized for your web pages.

To initialize it for an element or a set of elements, identified by a jQuery selector, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Initialize the Draggable widget for elements that you wish to drag.
3. Initialize the Droppable widget for elements that will accept draggable elements.

<!DOCTYPE html>
<html>
<head>
<title>Shield UI Editor</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

<div id="div1">Hello DIV!</div>

<div id="div2" style="width:100px; height:100px; border:1px solid black;">
    Drop items here...
</div>

<script type="text/javascript">
    jQuery(function ($) {
        $('#div1').shieldDraggable({
            helper: function() {
                return $("#div1").clone().css("opacity", "0.5");
            }
        });

        $("#div2").shieldDroppable({
            events: {
                drop: function(e) {
                    console.log("Dropped element with html: " + 
                        e.draggable.html());
                }
            }
        });
    });
</script>

</body>
</html>