<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Droppable - Default functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #draggable-5 { width: 100px; height: 50px; padding: 0.5em; float: left; margin: 22px 5px 10px 0; } #droppable-8 { width: 120px; height: 90px;padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable-5" ).draggable(); $("#droppable-8").droppable({ drop: function (event, ui) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); }, over: function (event, ui) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "moving in!" ); }, out: function (event, ui) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "moving out!" ); } }); }); </script> </head> <body> <div id = "draggable-5" class = "ui-widget-content"> <p>Drag me to my target</p> </div> <div id = "droppable-8" class = "ui-widget-header"> <p>Drop here</p> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Droppable - Default functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> .draggable-4 { width: 90px; height: 50px; padding: 0.5em; float: left; margin: 0px 5px 10px 0; border: 1px solid red; background-color:#B9CD6D; } .droppable-7 { width: 100px; height: 90px;padding: 0.5em; float: left; margin: 10px; border: 1px solid black; background-color:#A39480; } .droppable.active { background-color: red; } </style> <script> $(function() { $('.draggable-4').draggable({ revert: true }); $('.droppable-7').droppable({ hoverClass: 'active', drop: function(e, ui) { $(this).html(ui.draggable.remove().html()); $(this).droppable('destroy'); $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "i'm destroyed!" ); } }); }); </script> </head> <body> <div class = "draggable-4"><p>drag 1</p></div> <div class = "draggable-4"><p>drag 2</p></div> <div class = "draggable-4"><p>drag 3</p></div> <div style = "clear: both;padding:10px"></div> <div class = "droppable-7">drop here</div> <div class = "droppable-7">drop here</div> <div class = "droppable-7">drop here</div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Droppable - Default functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style type = "text/css"> #draggable-3 { width: 100px; height: 50px; padding: 0.5em; float: left; margin: 21px 5px 10px 0; } #droppable-6 { width: 120px; height: 90px;padding: 0.5em; float: left; margin: 10px; } .active { border-color : blue; background : grey; } .hover { border-color : red; background : green; } </style> <script> $(function() { $( "#draggable-3" ).draggable(); $( "#droppable-6" ).droppable({ activeClass: "active", hoverClass: "hover", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script> </head> <body> <div id = "draggable-3" class = "ui-widget-content"> <p>Drag me to my target</p> </div> <div id = "droppable-6" class = "ui-widget-header"> <p>Drop here</p> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Droppable - Default functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> .wrap { display: table-row-group; } #japanpeople,#indiapeople, #javatutorial,#springtutorial { width: 120px; height: 70px; padding: 0.5em; float: left; margin: 0px 5px 10px 0; } #japan,#india,#java,#spring { width: 140px; height: 100px;padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#japanpeople" ).draggable(); $( "#indiapeople" ).draggable(); $( "#japan" ).droppable({ accept: "#japanpeople", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#india" ).droppable({ accept: "#indiapeople", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#javatutorial" ).draggable({scope : "java"}); $( "#springtutorial" ).draggable({scope : "spring"}); $( "#java" ).droppable({ scope: "java", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#spring" ).droppable({ scope: "spring", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script> </head> <body> <div class = "wrap" > <div id = "japanpeople" class = "ui-widget-content"> <p>People to be dropped to Japan</p> </div> <div id = "indiapeople" class = "ui-widget-content"> <p>People to be dropped to India</p> </div> <div id = "japan" class = "ui-widget-header"> <p>Japan</p> </div> <div id = "india" class = "ui-widget-header"> <p>India</p> </div> </div> <hr/> <div class = "wrap" > <div id = "javatutorial" class = "ui-widget-content"> <p>People who want to learn Java</p> </div> <div id = "springtutorial" class = "ui-widget-content"> <p>People who want to learn Spring</p> </div> <div id = "java" class = "ui-widget-header"> <p>Java</p> </div> <div id = "spring" class = "ui-widget-header"> <p>Spring</p> </div> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Droppable - Default functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #draggable-2 { width: 100px; height: 50px; padding: 0.5em; margin: 0px 5px 10px 0; } #droppable-2,#droppable-3, #droppable-4,#droppable-5 { width: 120px; height: 90px;padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable-2" ).draggable(); $( "#droppable-2" ).droppable({ drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#droppable-3" ).droppable({ disabled : "true", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); $( "#droppable-4" ).droppable({ tolerance: 'touch', drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped with a touch!" ); } }); $( "#droppable-5" ).droppable({ tolerance: 'fit', drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped only when fully fit on the me!" ); } }); }); </script> </head> <body> <div id = "draggable-2" class = "ui-widget-content"> <p>Drag me to my target</p> </div> <div id = "droppable-2" class = "ui-widget-header"> <p>Drop here</p> </div> <div id = "droppable-3" class = "ui-widget-header"> <p>I'm disabled, you can't drop here!</p> </div> <div id = "droppable-4" class = "ui-widget-header"> <p>Tolerance Touch!</p> </div> <div id = "droppable-5" class = "ui-widget-header"> <p>Tolerance Fit!</p> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Droppable - Default functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #draggable-1 { width: 100px; height: 50px; padding: 0.5em; float: left; margin: 22px 5px 10px 0; } #droppable-1 { width: 120px; height: 90px;padding: 0.5em; float: left; margin: 10px; } </style> <script> $(function() { $( "#draggable-1" ).draggable(); $( "#droppable-1" ).droppable(); }); </script> </head> <body> <div id = "draggable-1" class = "ui-widget-content"> <p>Drag me to my target</p> </div> <div id = "droppable-1" class = "ui-widget-header"> <p>Drop here</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id = "div9" style = "border:solid 1px;background-color:gainsboro;"> <span>Drag me to check the event method firing</span><br /><br /> </div> <script> $("#div9 span").draggable ({ cursor: "move", axis : "x", drag: function( event, ui ) { alert("hi.."); } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id = "div7" style = "border:solid 1px;background-color:gainsboro;"> <span>You can't move me. Dragging is disabled.</span><br><br> </div> <div id = "div8" style = "border:solid 1px;background-color:grey;"> <span>You can move me. Dragging is enabled.</span><br><br> </div> <script> $("#div7 span").draggable (); $("#div7 span").draggable ('disable'); $("#div8 span").draggable (); $("#div8 span").draggable ('enable'); </script> </body> </html>
<!DOCTYPE html> <html> <head> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id = "divX" style = "border:solid 1px;background:#eee; height:50px;"> <span>Click anywhere on me to see cursor type...</span> </div> <script> /* First make the item draggable */ $("#divX span").draggable(); $("#divX span").bind('click', function( event ) { var cursor = $( "#divX span" ).draggable( "option", "cursor" ); var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" ); alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id = "div6" style = "border:solid 1px;background:#eee; height:50px;"> <span>You can duplicate me....</span> </div> <script> $("#div6 span").draggable ({ helper : "clone" }); </script> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more