Sortable onChange event and onUpdate event : Sortable « Scriptaculous « JavaScript DHTML






  1. JavaScript DHTML
  2. Scriptaculous
  3. Sortable

Sortable onChange event and onUpdate event

 
<html>
<head>
<title>Untitled Document</title>

<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>

<script type="text/javascript">
Event.observe(window, 'load', function() {

  var changeEffect;
  Sortable.create('myList', {
    onChange: function(item) {
      var list = Sortable.options(item).element; 
      alert(Sortable.serialize(list).escapeHTML());
      if (changeEffect) changeEffect.cancel();
      changeEffect = new Effect.Highlight('changeNotif', { restorecolor: 'transparent' });
    },
    onUpdate: function(list) {
      alert(Sortable.serialize(list).escapeHTML());
    }
  });
});
</script>
</head>
<body>

    <ol id="myList">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
    </ol>
    
</body>
</html>








Related examples in the same category

1.Sortable with ghosting effects
2.Sortable two-lists
3.Sortabled list with handlers
4.Sortable list updated event
5.drag and drop to sort
6.Sort and reorder the ordered list
7.Horizontally Sortable
8.Sortable is Not just for lists
9.Two sortable groups