Ajax Layer JavaScript DHTML


            
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


  script.aculo.us Drag and drop functional test file
  
  
  
  
  
    #thelist li { background: green; margin:5px; padding: 30px; }
    #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
  


script.aculo.us Drag and drop functional test file

Draggables/Droppables


  drag here
   Revert?



  drag here
   Revert?
  I've onStart, onDrag and onEnd events!



  This box overrides the default endeffect



  This box overrides the default starteffect


  This box overrides the default end- and starteffects

accepts first box
accepts second box

  new Draggable('revertbox1',{scroll:window,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
  new Draggable('revertbox2',{
    handle:'handle2',
    revert:function(element){return ($('shouldrevert2').checked)},
    onStart:function(){$('revertbox2').setStyle({backgroundColor:'#bfb'})},
    onDrag:function(){$('event-info').update('drag!')},
    onEnd:function(){alert('end!')}
  });
  
  Droppables.add('droptarget1',{accept:['box1','otherstuff'],onDrop:function(){alert('drop!')}});
  Droppables.add('droptarget2',{accept:'box',onDrop:function(){alert('drop!')}});
  
  
  new Draggable('specialbox',{
    endeffect:function(){
      new Effect.Highlight('specialbox',{queue:'end'});
    }
  });
  new Draggable('specialbox2',{
    starteffect:function(){
      new Effect.Highlight('specialbox2',{queue:'end'});
    }
  });
  new Draggable('specialbox3',{
    starteffect:function(){
      new Effect.Highlight('specialbox3',{queue:'end'});
    },
    endeffect:function(){
      new Effect.Highlight('specialbox3',{queue:'end'});
    }
  });



           
        
scriptaculous-js-1.6.4.zip( 139 k)