The Drag-able function can be used in JqueryUI to enable draggable functionality on a DOM element. Using Drag-able function we can drag the element by clicking on it with the mouse.
Example code:
<html>
<head>
<title>The jQuery Dragable Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(function() {
$( "#draggable_element" ).draggable();
});
</script>
<style>
#draggable_element { width: 150px; height: 150px; }
.back{
background-color: yellow;
width: 50px;
padding: 25px;
}
</style>
</head>
<body>
<div id = "draggable_element" class = "ui-widget-content">
<p class = "back">Drag me</p>
</div>
</body>
</html>
When you run this file in your browser you will see an element in yellow color with text Drag me, by clicking on this object with a mouse we can drag it anywhere within the viewport.
0 Comment(s)