Hello Reader's if you want to make a UI where your div can drag and movable all over the screen. Then the followin example is helful to you.
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable { width: 98px; height: 324px; padding: 0.3em; background:#Df235d4;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Click and drag me !</p>
</div>
</body>
</html>
Now when you load this html page a div will show up. This div can be move and can drag all over the screen.
In the above script the function is driven by draggable(). which will get new location from your mouse and will drag div to that place. And you can attach this div and script to your website to make your own UI screen.
0 Comment(s)