JavaScript Draggable Getting Started

The Draggable utility allows you to move elements around 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 widget.

<!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>

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

</body>
</html>