Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Dec 22nd, 2012  |  syntax: None  |  size: 2.21 KB  |  views: 81  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>jQuery UI Draggable - Default functionality</title>
  6. <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  7. <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  8. <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  9. <link rel="stylesheet" href="/resources/demos/style.css" />
  10. <style>
  11. #draggable { width: 150px; height: 150px; padding: 0.5em; border:1px solid black;}
  12. </style>
  13. <script>
  14. $(document).ready(function(){
  15.   $("#draggable").draggable();
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <img id="draggable" src="small/Koala.jpg"/>
  21. <img id="draggable" src="small/Desert.jpg"/>
  22. <img id="draggable" src="small/Tulips.jpg"/>
  23. </body>
  24. </html>
  25.        
  26. <!doctype html>
  27. <html lang="en">
  28. <head>
  29.     <meta charset="utf-8" />
  30.     <title>Wall Builder</title>
  31.     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  32.     <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  33.     <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  34.     <link rel="stylesheet" href="/resources/demos/style.css" />
  35.     <style>
  36.         .draggable { width: 85px; height: 85px; padding: 0.5em; border:1px solid black;}
  37.         .droppable { width: 150px; height: 150px; padding: 0.5em; border:1px solid black;}
  38.         </style>
  39.     <script>
  40.     $(document).ready(function() {
  41.       $(".draggable").draggable({
  42.         revert: "invalid"
  43.        ,helper: 'clone'
  44.       });
  45.       $( ".droppable" ).droppable({
  46.         accept: "draggable"
  47.       });
  48.     });
  49.     </script>
  50. </head>
  51. <body>
  52. <img class="draggable" id="1" src="small/Koala.jpg"/>
  53. <img class="draggable" id="2" src="small/Desert.jpg"/>
  54. <img class="draggable" id="3" src="small/Tulips.jpg"/>
  55. <div class="droppable" id="d1"></div>
  56. <div class="droppable" id="d2"></div>
  57. <div class="droppable" id="d3"></div>
  58. <div class="droppable" id="d4"></div>
  59. <div class="droppable" id="d5"></div>
  60.  
  61. </body>
  62. </html>
  63.        
  64. <script>
  65. $(document).ready(function(){
  66.   $(".draggable").draggable();
  67. });
  68. </script>
  69. </head>
  70. <body>
  71. <img class="draggable" src="small/Koala.jpg"/>
  72. <img class="draggable" src="small/Desert.jpg"/>
  73. <img class="draggable" src="small/Tulips.jpg"/>
  74. </body>
  75. </html>
clone this paste RAW Paste Data