Sortable with place holder : UI Sortable « jQuery « JavaScript Tutorial






<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');
      }
    });
  }
);
    </script>
    <style type='text/css'>
ul {
    list-style: none;

}
li {
    background: rgb(218, 191, 162);
    padding: 3px;
    width: 244px;
}
li.tmpPlaceholder {
    background: rgb(110, 159, 128);
    height: 22px;
}

    </style>
  </head>
  <body>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </body>
</html>








30.149.UI Sortable
30.149.1.jQuery UI Sortable - Default functionality
30.149.2.jQuery UI Sortable - Delay start
30.149.3.jQuery UI Sortable - Display as grid
30.149.4.jQuery UI Sortable - Handle empty lists
30.149.5.jQuery UI Sortable - Include / exclude items
30.149.6.jQuery UI Sortable - Drop placeholder
30.149.7.jQuery UI Sortable - Connect lists
30.149.8.jQuery UI Sortable - Connect lists with Tabs
30.149.9.jQuery UI Sortable - Portlets
30.149.10.sortable placeholder: "empty"
30.149.11.sortable helperMaker
30.149.12.Sortable with place holder
30.149.13.Sortable update event
30.149.14.Placehoder, helper for sortable