mochikit_v14/examples/simple_dnd/dnd_hoverclass.html

   1 <html>
   2 <head>
   3 <title>script.aculo.us Drag and drop functional test file</title>
   4     <script type="text/javascript" src="../../MochiKit/MochiKit.js"></script>
   5     <script type="text/javascript" src="../../MochiKit/Position.js"></script>
   6     <script type="text/javascript" src="../../MochiKit/Visual.js"></script>
   7     <script type="text/javascript" src="../../MochiKit/DragAndDrop.js"></script>
   8 </head>
   9 <style>
  10   div.hoverclass123 {
  11     border:1px solid red;
  12   }
  13 </style>
  14 <body>
  15
  16 <h1>script.aculo.us Drag and drop functional test file</h1>
  17
  18 <h2>w/o hoverclass</h2>
  19
  20 <div id="cart" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
  21 ### DROP HERE ###
  22 </div>
  23
  24 <script type="text/javascript">new MochiKit.DragAndDrop.Droppable('cart', {ondrop:function(element,dropon){alert('w/o hoverclass, should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'cart\':' + dropon.id)}})</script>
  25
  26 <br/>
  27
  28 <img alt="Product2" id="product_id" src="icon.png" /> &lt;-- drag this!
  29
  30 <script type="text/javascript">new MochiKit.DragAndDrop.Draggable('product_id', {revert:true})</script>
  31
  32 <h2>w/ hoverclass</h2>
  33
  34
  35 <div id="carth" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
  36 ### DROP HERE ###
  37 </div>
  38
  39 <script type="text/javascript">new MochiKit.DragAndDrop.Droppable('carth', {hoverclass:'hoverclass123',ondrop:function(element, dropon, event){alert('w/ hoverclass: should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'carth\':' + dropon.id)}})</script>
  40
  41
  42 </body>
  43 </html>