title: Add a draggable window to a page using Greasemonkey
body: <p>I'm trying to create a Greasemonkey script that adds a draggable div to every web page. For some reason, the div isn't displaying at all. What might be the reason for this?</p>
  
  <pre><code>// ==UserScript==
  // @name       Draggable box demo
  // @namespace  http://use.i.E.your.homepage/
  // @version    0.1
  // @description  enter something useful
  // @match      *://www.*
  // @copyright  2012+, You
  // @require http://code.jquery.com/jquery-latest.js http://code.jquery.com/ui/1.9.2/jquery-ui.js
  // ==/UserScript==
  //alert("Hi!");
  
  $(document).ready(function() {
      $(document).append("&lt;div id='dragZone'&gt;&lt;div class='draggable'&gt;Drag here!&lt;input type = 'text'&gt;&lt;/input&gt;&lt;/div&gt;");
      $('#dragZone').css('position', 'absolute');
      var a = 3;
      $('.draggable').draggable({
          start: function(event, ui) { $(this).css("z-index", a++); }
      });
      $('#dragZone div').mousedown(function() {
          $(this).addClass('top').removeClass('bottom');
          $(this).siblings().removeClass('top').addClass('bottom');
          $(this).css("z-index", a++);
      });
  });
  </code></pre>