Skip to content

All topics  /  jQuery

JQuery UI Draggable Example

jQuery ·

Hi Guys,

In this tutorial,I will learn you how to use jquery ui draggable. you can simplay and easy to use jquery ui draggable.

This method allows the elements to be dragged with the help of mouse. Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port.

Example :


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JQuery UI Draggable Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
        #draggabled { width: 150px; height: 150px; padding: 0.5em; border:2px solid #008B8B;}
        p{
            text-align: center;
            margin-top:60px;
            color:#008B8B;
            font-weight: bold;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    <h2>JQuery UI Draggable Example - NiceSnippets.com</h2>
    <div id="draggabled" class="ui-widget-content">
        <p>Draggable Me</p>
    </div>
    <script>
        $( function() {
            $("#draggabled").draggable();
        });
    </script>
</body>
</html>

It will help you...

More on this topic