Make div element draggable using jQuery

To make an HTML DOM element like div draggable we can make use of jQuery UI.

Example :

We have a div element that can be moved by clicking on it with the mouse and dragging it anywhere within the viewport.

Code :

<!doctype html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style>
         #box {
         width:200px;
         padding:20px;
         background:#eee;
         text-align:center;
         border: 1px solid #ccc
         }
      </style>
      <script>
         $(function () {
             $("#box").draggable();
         });
           
      </script>
   </head>
   <body>
      <div id="box" class="ui-widget-content">
         <p>You can drag this box</p>
      </div>
   </body>
</html>

Have Questions? Post them here!

More Posts related to jQuery,

More Posts: