Trends-JS

var childtag=1;
$(document).ready(function(){
    $("ul#itemul li img").each(function(index){
        var id=$(this).attr('id');
        $(this).draggable({
            containment: '#container',
            helper: 'clone',
            appendTo: '#canvas',
            cursor: 'move',
            //revert: true,
            start: function(event, ui) {
                // Show start dragged position of image.
                var Startpos = $(this).position();
                console.log("StartPosition of canvas:"+Startpos.top+","+Startpos.left);
            },
            // Find position where image is dropped.
            stop: function(event, ui) {
                // Show dropped position.
                var Stoppos = $(this).position();
                console.log("StopPosition of canvas:"+Stoppos.top+","+Stoppos.left);
            }
        });
    });
    $('#canvas').droppable({
        accept: '#itemul li img',
        tolerance: 'fit',
        greedy: true,
        drop: handleDrop
    });
});

function handleDrop(event,ui){
    //var itemid=ui.draggable.data('itemid');
    //var pos = ui.draggable.position();
    var positionCanvas=$(this).position();
    console.log("Position of canvas:"+positionCanvas.top+","+positionCanvas.left);
    var posItemUL=$("#itemul").position();
    console.log("Position of #itemul:"+posItemUL.top+","+posItemUL.left);
    var pos = ui.draggable.position();
    console.log("Position of draggable:"+pos.top+","+pos.left);
    var itemid=$(ui.draggable).attr("id");
    var childid="ch"+childtag+"_"+itemid;
    var thisClone=$(ui.draggable).clone().attr("id",childid);
    var posClone=thisClone.position();
    console.log("Position of clone:"+pos.top+","+pos.left);

    //////////////////
    x=event.pageX;
    y=event.pageY;

    dx=$("#canvas").offset().left;
    dy=$("#canvas").offset().top;
    var left=x-dx;
    var top=y-dy;
    console.log("x,dx,y,dy="+x+","+dx+","+y+","+dy)
    console.log("Position calculated:"+left+","+top);
    ///////////////////
    thisClone.css("left",left);
    thisClone.css("top",top);

    $(this).append(thisClone);
    canvasItemDraggable();
    childtag++;
}

function canvasItemDraggable(){
    //$("#canvas")
}