Issues using jQuery UI and html2canvas plugins

Question

I have few issues in using jQuery UI and html2canvas plugins.

Please look into the jsfiddle and the jQuery code below. http://jsfiddle.net/fX262/7/

$(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('<img src="'+canvasImg+'" alt="">');
                /*window.open(canvasImg);*/
            }
        });
    });
});

1. Why when I drop the images from the right side to the left side container, the images position weirdly below than desired position?
2. Why I couldn't resize the dropped images?
3. 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?

I need this to be compatible to Firefox 28, Google chrome 32, and if possible IE 8.

Any kind of help would be greatly appreciated.

EDIT :
Resizable now works by adding $(".borrd-item").resizable(); inside drop: function (event, ui) {} 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?
http://jsfiddle.net/fX262/9/

Answer 1

Finally, drag, drop and resize works even with forward, backward and remove buttons!

http://jsfiddle.net/fX262/11/
http://jsfiddle.net/fX262/11/embedded/result/

Applying resize on img tag didn't work. Only on block elements it works. So I wrapped img tag in a block element and applied jQuery UI on it.

Also adding IDs to clones and verifying them did the trick like this:

if ($(ui.draggable)[0].id !== "") {
    x = ui.helper.clone();    
    ui.helper.remove();    
    x.addClass("borrd-item");    
    x.draggable({    
        helper: 'original',    
        containment: '#borrd-droppable',    
        tolerance: 'fit',    
        start: function (event, ui) {    
            $(this).css("z-index", a++);    
        }    
    });    
}

Is this a bug in jQuery UI itself?

Right now the other issues are:

1. Why when we drag and drop images to the left side, images position far below than the actual position? I removed all paddings and margins on the elements like inputs and div containers above "borrd-droppable" div. The images now position less below than before. So I think this is some kind of CSS issue.

2. When overlapping images, if we click forward few times on one image, it's z-index is increased to far more than other images. Now if that image has to go backward, we have to click few more times. Instead of that can it be made to move backward to the next image in just one click?

3. canvas2html also works but only in Firefox. Not it Google Chrome. I even tried $(window).load function. Doesn't work. Know why?

Btw, even though I post the code and description this question didn't get a single reply. It is demotivating for a newbie like me in Stack Overflow.