Hide demo panel
AJAX DEMOS Inner Html Javascript Updater
 
 
 
 
 
  
DRAG & DROP DEMOS Simple Custom Draggable Custom Drop Zone
 
 
 
 
  
CINEMATIC DEMOS Animate Position Animate Size Animate Size & Position Animate Fade Round a Shape Color Example Rounded Corner Examples
 
BEHAVIOR DEMOS Accordion Weather Widget LiveGrid - Data Table LiveGrid - Search
 
 
 
SIMPLE DRAG & DROP EXAMPLE 
Drag Me

Drop On Me
Drop On Me 2
 
   <div class="box" style="background:#f7a673" id="dragme">

      Drag Me
   </div>

   <div style="margin-bottom:8px;">
      <div id="droponme" class="panel" style="display:inline;background:#ffd773">
         <div class="title">Drop On Me</div>
      </div>

      <span> </span>
									
      <div id="droponme2" class="panel" style="display:inline;background:#c6c3de">
         <div class="title">Drop On Me 2</div>
      </div>
   </div>

   <script>
      dndMgr.registerDraggable( new Rico.Draggable('test-rico-dnd','dragme') );
      dndMgr.registerDropZone( new Rico.Dropzone('droponme') );
      dndMgr.registerDropZone( new Rico.Dropzone('droponme2') );
   </script>