[ Index ]

PHP Cross Reference of Drupal 6 (gatewave)

title

Body

[close]

/sites/all/modules/jquery_ui/jquery.ui/demos/sortable/ -> items.html (source)

   1  <!doctype html>
   2  <html lang="en">
   3  <head>
   4      <title>jQuery UI Sortable - Include / exclude items</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; zoom: 1; }

  12      #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }

  13      </style>
  14      <script type="text/javascript">
  15      $(function() {
  16          $("#sortable1").sortable({
  17              items: 'li:not(.ui-state-disabled)'
  18          });
  19  
  20          $("#sortable2").sortable({
  21              cancel: '.ui-state-disabled'
  22          });
  23  
  24          $("#sortable1 li, #sortable2 li").disableSelection();        
  25      });
  26      </script>
  27  </head>
  28  <body>
  29  <div class="demo">
  30  
  31  <h3 class="docs">Specify which items are sortable:</h3>
  32  
  33  <ul id="sortable1">
  34      <li class="ui-state-default">Item 1</li>
  35      <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
  36      <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
  37      <li class="ui-state-default">Item 4</li>
  38  </ul>
  39  
  40  <h3 class="docs">Cancel sorting (but keep as drop targets):</h3>
  41  
  42  <ul id="sortable2">
  43      <li class="ui-state-default">Item 1</li>
  44      <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
  45      <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
  46      <li class="ui-state-default">Item 4</li>
  47  </ul>
  48  
  49  </div><!-- End demo -->
  50  
  51  <div class="demo-description">
  52  
  53  <p>
  54      Specify which items are eligible to sort by passing a jQuery selector into
  55      the <code>items</code> option. Items excluded from this option are not
  56      sortable, nor are they valid targets for sortable items.
  57  </p>
  58  
  59  <p>
  60      To only prevent sorting on certain items, pass a jQuery selector into the
  61      <code>cancel</code> option. Cancelled items remain valid sort targets for
  62      others.
  63  </p>
  64  
  65  </div><!-- End demo-description -->
  66  
  67  </body>
  68  </html>


Generated: Thu Mar 24 11:18:33 2011 Cross-referenced by PHPXref 0.7