728x90
반응형
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>jQuery UI</title> <!-- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> --> <!-- <link rel="stylesheet" href="site.css" /> --> </head> <body> <div id="main"> <div id="dragbox1" class="dragbox">오이</div> <div id="dragbox2" class="dragbox">양배추</div> <div id="dragbox3" class="dragbox">양상추</div> <hr /> <div class="dropbox"></div> </div> <!-- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> --> <!-- <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> --> <script> $(function() { $('#dragbox1, #dragbox2, #dragbox3').draggable({ revert : true, scope : 'ok' }); $('#dragbox3').draggable({ revert : true }); $('.dropbox').droppable({ scope : 'ok', drop : function(e, ui) { $(this).html($(this).html() + ui.draggable.text() + '가 들어왔습니다.<br />'); } }); }); </script> </body> </html> | cs |
728x90
반응형