HEX

File: //usr/share/doc/libjs-scriptaculous/test/functional/dragdrop9_test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script src="../../lib/prototype.js" type="text/javascript"></script>
    <script src="../../src/scriptaculous.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="source" style="height: 100px; width: 100px; background-color: gray;">
      Draggable
    </div> 
    <script type="text/javascript">
    //<![CDATA[
    new Draggable("source", {
      revert:"failure", 
      onDropped: function(element){ $(element).update('I WAS DROPPED!') },
      reverteffect: function(element, top_offset, left_offset) {
        var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
        new Effect.Move(element, { 
          x: -left_offset, y: -top_offset, duration: dur,
          transition: Effect.Transitions.spring,
          queue: {scope:'_draggable', position:'end'}
        });
      }
    });
    //]]>
    </script>
    
    <br/>
    
    <div id="target" style="height: 100px; width: 100px; background-color: green;">
      Good Target
    </div>
    
     <script type="text/javascript">
     //<![CDATA[
     Droppables.add("target", {
       onDrop:function(element){ Effect.Puff($('source')); }
     });
     //]]>
     </script>
    
     <br/>
    
  </body>
</html>