title: Issues using jQuery UI and html2canvas plugins
body: <p>I have few issues in using jQuery UI and html2canvas plugins.</p>
  
  <p>Please look into the jsfiddle and the jQuery code below.
  <a href="http://jsfiddle.net/fX262/7/" rel="nofollow">http://jsfiddle.net/fX262/7/</a></p>
  
  <pre><code>$(function () {
      $(".borrd-create-prod li a img").draggable({
          revert: "invalid",
          helper: "clone",
          cursor: "move"
      });
  
      $(".borrd-item").droppable();
  
      $("#borrd-droppable").droppable({
          activeClass: "ui-state-default",
          hoverClass: "ui-state-hover",
          accept: ".borrd-create-prod li a img",
          drop: function (event, ui) {
              $(this).append(ui.helper.clone());
              $("#borrd-droppable img").addClass("borrd-item");
              $(".borrd-item").draggable({
                  stack: ".borrd-item"
              });
              $(".borrd-item").droppable({
                  containment: "#borrd-droppable"
              });
              /*ui.helper.clone().resizable({
            animate: "true"
         });*/
              $(".borrd-item").each(function (i) {
                  $(this).attr("id", "prod_img_" + i);
              });
  
              $(".borrd-item").droppable({
                  containment: "#borrd-droppable"
              });
  
              $(this).find(".placeholder-txt").remove();
          },
      });
  
      $(".borrd-drop img").resizable({
          handles: "n, e, s, w, sw, ne, nw, sw",
          animate: "true"
      });
  
      $(".borrd-right").tabs({
          hide: {
              effect: "fade",
              duration: "fast"
          }
      });
  });
  
  $(function() {
      $( "#submitBorrdImg" ).click(function() {
          html2canvas($("#borrd-droppable"), {  
              onrendered: function (canvas) {
                  var canvasImg = canvas.toDataURL("image/jpg");
                  $("#canvasImg").html('&lt;img src="'+canvasImg+'" alt=""&gt;');
                  /*window.open(canvasImg);*/
              }
          });
      });
  });
  </code></pre>
  
  <ol>
  <li>Why when I drop the images from the right side to the left side container, the images position weirdly below than desired position?</li>
  <li>Why I couldn't resize the dropped images?</li>
  <li>If I click "Post" button, a screenshot of contents in "#borrd-droppable" div should be generated and displayed in "#canvasImg" div. But why nothing happens?</li>
  </ol>
  
  <p>I need this to be compatible to Firefox 28, Google chrome 32, and if possible IE 8.</p>
  
  <p><strong>Any kind of help would be greatly appreciated.</strong></p>
  
  <p><strong>EDIT :</strong><br>
  Resizable now works by adding <code>$(".borrd-item").resizable();</code> inside <code>drop: function (event, ui) {}</code> and adding corresponding jQuery UI CSS. But after you drag and drop in the left side, it doesn't drag anymore. Can anyone throw some light on this problem?<br>
  <a href="http://jsfiddle.net/fX262/9/" rel="nofollow">http://jsfiddle.net/fX262/9/</a></p>