jQuery drag & drop works in html

jQuery drag & drop works in html

Does jQuery drag & drop functionality work on HTML as well? I used button tags and used same drag & drop jQuery function to get it work. But unfortunately it does not work? Is it possible to call drag & drop functions for HTML buttons? I would be glad if you can help me. Here is the code that I used for that.

  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>JSP Page</title>
  6.     <script src="jquery-1.4.2.js"></script>
  7.     <script src="jquery-ui.js"></script>
  8.     <script>
  9.         alert("inside script");
  10.         $().ready(function() {
  11.             alert("inside function");
  12.             $("#draggable2").draggable({revert: "invalid"});
  13.             $("#button2").draggable({revert: "invalid"});
  14.             $("#textarea1").droppable({
  15.                
  16.                  accept: function(d)  {
  17.                     alert("droppable");
  18.                     if((d.attr("id")=="button2")){
  19.                         return true;
  20.                     }
  21.                 }
  22.             });


  25.             alert("after script");

  27.         });


  30.     </script>

  32. </head>
  33. <body>
  34.     <h1>Hello World!</h1>
  35.     <input type="button" value="Help" id="button2" disabled="disabled">
  36.         <input id="submitme" type="submit" value="Send me your name!"><br>
  37.     <button id="button1" value="Draggable Yellow" name="draggable">drag me</button>
  38.      <textarea id="textarea1" rows="2" cols="20"></textarea
  39.      
  40.     <div id="draggable2">
  41. <p>Drag me around</p>
  42. </div>
  43. </body>


  46. </html>