droppableItems.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>jQuery UI Droppable - Default Demo</title>
  6. <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
  7. <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  8. <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
  9. <style type="text/css">
  10. #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  11. #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  12. </style>
  13. <script type="text/javascript">
  14. $(function() {
  15. $("#draggable").draggable();
  16. $("#droppable").droppable({
  17. drop: function(event, ui) {
  18. $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
  19. }
  20. });
  21. var report_event = function(report_text) {
  22. var reportElement = $("#drop_reports");
  23. var origText = reportElement.text();
  24. reportElement.text(origText + " " + report_text);
  25. }
  26. $('body').mousedown(function() {
  27. report_event('down');
  28. });
  29. $('body').mousemove(function() {
  30. report_event('move');
  31. });
  32. $('body').mouseup(function() {
  33. report_event('up');
  34. });
  35. });
  36. </script>
  37. </head>
  38. <body>
  39. <div class="demo">
  40. <div id="draggable" class="ui-widget-content">
  41. <p>Drag me to my target</p>
  42. </div>
  43. <div id="droppable" class="ui-widget-header">
  44. <p>Drop here</p>
  45. </div>
  46. <div class="test-data">
  47. <p id="drop_reports">start</p>
  48. </div>
  49. </div><!-- End demo -->
  50. <div class="demo-description">
  51. <p>Taken from the JQuery demo.</p>
  52. </div><!-- End demo-description -->
  53. </body>
  54. </html>