Code2care : TechZone Apps & Tutorials

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


Top




Posts related to jquery.


1. jQuery : Move to top of the page

2. Make div element draggable using jQuery

3. Get screen width and height dynamically using jquery








Popular tags
android
x 175
eclipse
x 29
notepadplusplus
x 20
macosx
x 14
sharepoint
x 14
html
x 14
mac
x 13
androidstudio
x 11




1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy


Code2care © 2012-17