jQuery UI Draggable + Sortable : UI Draggable « jQuery « JavaScript Tutorial






<!--
  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 + Sortable</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>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <style type="text/css">
  .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
  .demo li { margin: 5px; padding: 5px; width: 150px; }
  </style>
  <script type="text/javascript">
  $(function() {
    $("#sortable").sortable({
      revert: true
    });
    $("#draggable").draggable({
      connectToSortable: '#sortable',
      helper: 'clone',
      revert: 'invalid'
    })
    $("ul, li").disableSelection();
  });
  </script>
</head>
<body>
<div class="demo">
  
<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

</div><!-- End demo -->

<div class="demo-description">

<p>
Draggables are built to interact seamlessly with <a href="#">sortables</a>.
</p>

</div><!-- End demo-description -->
</body>
</html>








30.142.UI Draggable
30.142.1.jQuery UI Draggable - Constrain movement
30.142.2.jQuery UI Draggable - Cursor style
30.142.3.jQuery UI Draggable - Default functionality
30.142.4.jQuery UI Draggable - Delay start
30.142.5.jQuery UI Draggable - Events
30.142.6.jQuery UI Draggable - Handles
30.142.7.jQuery UI Draggable - Revert position
30.142.8.jQuery UI Draggable - Auto-scroll
30.142.9.jQuery UI Draggable - Snap to element or grid
30.142.10.jQuery UI Draggable + Sortable
30.142.11.jQuery UI Draggable - Visual feedback
30.142.12.Change cursor for draggable tag
30.142.13.Set cursor position for the draggable
30.142.14.Can only drag along with axis y
30.142.15.Drag delay
30.142.16.Drag along a grid
30.142.17.revert: true (fly back)
30.142.18.Add border to the draggable
30.142.19.Only draggable inside parent
30.142.20.Snap to another
30.142.21.start and stop events
30.142.22.Add dragging stopped event handler
30.142.23.Disable, enable and destroy the draggable object
30.142.24.Set the handles for all directions
30.142.25.Add knobHandles