jQuery UI Draggable - Default functionality : UI Draggable « jQuery « JavaScript DHTML






  1. JavaScript DHTML
  2. jQuery
  3. UI Draggable

jQuery UI Draggable - Default functionality

 <!-- jQuery UI Effects Blind 1.7.2 Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)  Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. --> <!doctype html> <html lang="en"> <head> <title>jQuery UI Draggable - Default functionality</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script type="text/javascript"> $(function() { $("#draggable").draggable(); }); </script> </head> <body> <div class="demo"> <div id="draggable"class="ui-widget-content"> <p>Drag me around</p> </div> </div><!-- End demo --> <div class="demo-description"> <p> Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. </p> </div><!-- End demo-description --> </body> </html>








Related examples in the same category

1.jQuery UI Draggable - Constrain movement
2.jQuery UI Draggable - Cursor style
3.jQuery UI Draggable - Delay start
4.jQuery UI Draggable - Events
5.jQuery UI Draggable - Handles
6.jQuery UI Draggable - Revert position
7.jQuery UI Draggable - Auto-scroll
8.jQuery UI Draggable - Snap to element or grid
9.jQuery UI Draggable + Sortable
10.jQuery UI Draggable - Visual feedback
11.Change cursor for draggable tag
12.Set cursor position for the draggable
13.Can only drag along with axis y
14.Drag delay
15.Drag along a grid
16.Add border to the draggable
17.Only draggable inside parent
18.Add dragging stopped event handler
19.revert: true (fly back)
20.Snap to another
21.start and stop events
22.Disable, enable and destroy the draggable object
23.Set the handles for all directions
24.Add knobHandles
close