Drag & Drop Images in Canvas Grid

Question

I'm Dragging and Dropping a rectangle container and images from a menu onto a canvas grid and then moving them around.Currently I'm able to load them multiple times onto a canvas and delete them on double click as shown in the link below.

http://jsfiddle.net/Lucy1/wQ8YA/35/

The problem I'm facing is that when I'm trying to drag & drop the container and images in the canvas grid they are getting dropped in the right hand side of the desired location.If I try to drop them in the left side of the grid then they get dropped in the center of the grid and when I'm trying to drop them in the center of the grid they are getting dropped right side beyond the grid. The function to make them draggable and droppable is

var $clone = ui.helper.clone();
// all clones are draggable
// if clone is shape then draggable + resizable
if (!$clone.is('.inside-droppable')) {
    $(this).append($clone.addClass('inside-droppable').draggable({
            containment: $stageContainer,
            tolerance: 'fit',
            cursor: 'pointer',
            position: 'relative'             
            }));

    if ($clone.is(".imag") === false) {
            $clone.resizable({
                containment: $stageContainer
            });          
    }
    $clone.on('dblclick', function () {
        $clone.remove();
        layer.draw();
    });
   }

i can't seem to understand where I'm going wrong in the above function to drag & drop the container and the images in the desired location of the canvas grid..Please Help

Answer 1

I haven't gone deeply through your code,but by adding the following line in dragdrop function,it works fine

 $clone.css({top: y, left: x, position:'absolute'});

SEE DEMO HERE