1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <title>jQuery UI Droppable - Default Demo</title>
- <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
- <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
- <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
- <style type="text/css">
- #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
- #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#draggable").draggable();
- $("#droppable").droppable({
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
- var report_event = function(report_text) {
- var reportElement = $("#drop_reports");
- var origText = reportElement.text();
- reportElement.text(origText + " " + report_text);
- }
- $('body').mousedown(function() {
- report_event('down');
- });
- $('body').mousemove(function() {
- report_event('move');
- });
- $('body').mouseup(function() {
- report_event('up');
- });
- });
- </script>
- </head>
- <body>
- <div class="demo">
- <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>
- <div class="test-data">
- <p id="drop_reports">start</p>
- </div>
- </div><!-- End demo -->
- <div class="demo-description">
- <p>Taken from the JQuery demo.</p>
- </div><!-- End demo-description -->
- </body>
- </html>
|