Placehoder, helper for sortable : UI Sortable « jQuery « JavaScript DHTML






Placehoder, helper for sortable

 

<html>
  <head>
  <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.sortable.js"></script>  
    <script type='text/javascript'>
$(document).ready(
  function() {
    $('ul').sortable({
      placeholder: 'tmpPlaceholder',
      helper: function(e, element) {
      return $(element).clone().addClass('tmpHelper');
      },
      update : function(e, ui) {
        alert("updated");
      }
    });
  }
);
    </script>
    <style type='text/css'>
ul {
    list-style: none;
}
li.tmpPlaceholder {
    height: 22px;
}
    </style>
  </head>
  <body>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </body>
</html>

   
  








Related examples in the same category

1.jQuery UI Sortable - Default functionality
2.jQuery UI Sortable - Delay start
3.jQuery UI Sortable - Display as grid
4.jQuery UI Sortable - Handle empty lists
5.jQuery UI Sortable - Include / exclude items
6.jQuery UI Sortable - Drop placeholder
7.jQuery UI Sortable - Connect lists
8.jQuery UI Sortable - Connect lists with Tabs
9.jQuery UI Sortable - Portlets
10.Set containment to the container and distance to 30
11.sortable placeholder: "empty"
12.sortable helperMaker
13.Sortable with place holder
14.Sortable update event