Scriptaculous JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. Scriptaculous
  4. Drag and drop to reorder


        "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




  • Relatively here!

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one

  • one





    • //  Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
    Position.includeScrollOffsets = true;
    Sortable.create('thelist2',{scroll:'scroll-container'});