PHPXRef 0.7 : Drupal 6 (yi-drupal) : /sites/all/libraries/jquery.ui/demos/sortable/connect-lists.html source

[Summary view] [Print] [Text view]

   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Sortable - Connect lists</title>
   5      <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
   6      <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
   7      <script type="text/javascript" src="../../ui/ui.core.js"></script>
   8      <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
   9      <link type="text/css" href="../demos.css" rel="stylesheet" />
  10      <style type="text/css">
  11      #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }

  12      #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

  13      </style>
  14      <script type="text/javascript">
  15      $(function() {
  16          $("#sortable1, #sortable2").sortable({
  17              connectWith: '.connectedSortable'
  18          }).disableSelection();
  19      });
  20      </script>
  21  </head>
  22  <body>
  23  <div class="demo">
  24  
  25  <ul id="sortable1" class="connectedSortable">
  26      <li class="ui-state-default">Item 1</li>
  27      <li class="ui-state-default">Item 2</li>
  28      <li class="ui-state-default">Item 3</li>
  29      <li class="ui-state-default">Item 4</li>
  30      <li class="ui-state-default">Item 5</li>
  31  </ul>
  32  
  33  <ul id="sortable2" class="connectedSortable">
  34      <li class="ui-state-highlight">Item 1</li>
  35      <li class="ui-state-highlight">Item 2</li>
  36      <li class="ui-state-highlight">Item 3</li>
  37      <li class="ui-state-highlight">Item 4</li>
  38      <li class="ui-state-highlight">Item 5</li>
  39  </ul>
  40  
  41  </div><!-- End demo -->
  42  
  43  <div class="demo-description">
  44  
  45  <p>
  46      Sort items from one list into another and vice versa, by passing a selector into
  47      the <code>connectWith</code> option. The simplest way to do this is to
  48      group all related lists with a CSS class, and then pass that class into the
  49      sortable function (i.e., <code>connectWith: '.myclass'</code>).
  50  </p>
  51  
  52  </div><!-- End demo-description -->
  53  
  54  </body>
  55  </html>

PHP Cross Reference of Drupal 6 (yi-drupal)

/sites/all/libraries/jquery.ui/demos/sortable/ -> connect-lists.html (source)