third-party/jquery-ui-1.10.2/demos/draggable/sortable.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Draggable + Sortable</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.mouse.js"></script>
  11         <script src="../../ui/jquery.ui.draggable.js"></script>
  12         <script src="../../ui/jquery.ui.sortable.js"></script>
  13         <link rel="stylesheet" href="../demos.css">
  14         <style>
  15         ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
  16         li { margin: 5px; padding: 5px; width: 150px; }
  17         </style>
  18         <script>
  19         $(function() {
  20                 $( "#sortable" ).sortable({
  21                         revert: true
  22                 });
  23                 $( "#draggable" ).draggable({
  24                         connectToSortable: "#sortable",
  25                         helper: "clone",
  26                         revert: "invalid"
  27                 });
  28                 $( "ul, li" ).disableSelection();
  29         });
  30         </script>
  31 </head>
  32 <body>
  33
  34 <ul>
  35         <li id="draggable" class="ui-state-highlight">Drag me down</li>
  36 </ul>
  37
  38 <ul id="sortable">
  39         <li class="ui-state-default">Item 1</li>
  40         <li class="ui-state-default">Item 2</li>
  41         <li class="ui-state-default">Item 3</li>
  42         <li class="ui-state-default">Item 4</li>
  43         <li class="ui-state-default">Item 5</li>
  44 </ul>
  45
  46 <div class="demo-description">
  47 <p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable">sortables</a>.</p>
  48 </div>
  49 </body>
  50 </html>