title: Add image to screen on-click and allow it to be draggable/rotatable
body: <p>I am trying to create a sort of map builder where the user can select from a list of predefined objects, and upon clicking one of them, it will appear inside a frame with orientation options (dragging, rotating, resizing).</p>
  
  <p>I don't understand how one can add functionality to an object that is undefined at the page's run time.</p>
  
  <p>I have found a lot of good examples demonstrating how to use Jquery UI as well as adding an image to the screen onclick, but have never seen the two married together.</p>
  
  <p>Here is a good example of the add onclick feature: <a href="https://stackoverflow.com/questions/8886248/add-image-to-page-onclick">Add image to page onclick</a></p>
  
  <p>(Orientation on click examples are quite numerous)</p>
  
  <p>Here is the code I liked from the link (from tjarratt), so if someone could help me branch off from here that would be easiest.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
          function addimage() { 
            var img = document.createElement("img");
            img.src = "http://bricksplayground.webs.com/brick.PNG"; 
            img.height = 50; 
            img.width = 100;
  
            //optionally set a css class on the image
            var class_name = "foo";
            img.setAttribute("class", class_name);
  
            document.body.appendChild(img);
          }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button onclick="addimage();"&gt;Click&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>