I will now get to the jQuery UI project which adds a lot of interesting functionality to the jQuery core engine.
This is a demo I copy pasted from it. http://awrdev.g3tech.in/jquery_tutorials/ui-dragdrop.html Please look at the source. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable - Visual feedback</title> <link rel="stylesheet" href="/css/jquery.ui.all.css"> <link rel="stylesheet" href="/css/demos.css"> <script src="/jquery/jquery.min.js"></script> <script src="/jquery/jquery.ui.core.js"></script> <script src="/jquery/jquery.ui.widget.js"></script> <script src="/jquery/jquery.ui.mouse.js"></script> <script src="/jquery/jquery.ui.draggable.js"></script> <script src="/jquery/jquery.ui.droppable.js"></script> <style> #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } h3 { clear: left; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#draggable2" ).draggable(); $( "#droppable2" ).droppable({ accept: "#draggable2", activeClass: "ui-state-hover", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script> </head> <body> <h3>Feedback on hover:</h3> <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> </div> <h3>Feedback on activating draggable:</h3> <div id="draggable2" class="ui-widget-content"> <p>Drag me to my target</p> </div> <div id="droppable2" class="ui-widget-header"> <p>Drop here</p> </div> <div class="demo-description"> <p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p> </div> </body> </html> -Girish -- Gayatri Hitech http://gayatri-hitech.com _______________________________________________ ILUGC Mailing List: http://www.ae.iitm.ac.in/mailman/listinfo/ilugc ILUGC Mailing List Guidelines: http://ilugc.in/mailinglist-guidelines
