Jquery Drag and Drop Issues with position, help!

I am having some issues with drag, drop and positioning in jquery.

Here is what I am trying to achieve:

1. You drag a clone of a div to another div which is开发者_StackOverflow the "stage"
2. I need to position of the clone and not the original

Here is my attempt so far:

$(function() {

$("#workspacemaster").droppable({
accept: '.draggable',
drop: function(event, ui) 
{
}

});

// Make images draggable.
$("#draggable1").draggable({

    // Find original position of dragged image.
    start: function(event, ui) {

        // Show start dragged position of image.
        var Startpos = $(this).position();
        $("div#start1").text("1 START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
    },
    cursor: 'move',
    grid: [20, 20],

    // Find position where image is dropped.
    stop: function(event, ui) {

        // Show dropped position.
        var Stoppos = $(this).position();
        $("div#stop1").text("1 STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
    }
});

});

I think you should implement this on the droppable instead of the draggable

$('#workspacemaster').droppable({
  accept: '.draggable',
  drop: function(event, ui){
    //do something with $(ui.helper) or $(ui.draggable);
    // this is scoped to the droppable
  }
});

I did this for chrome, you're ganna have to make it cross-browser:

$(".draggable").draggable({
    helper:"clone",
    //this will take whatever css you have for .draggable and add opacity
    opacity:0.7
});


$('#workspacemaster').droppable(
  {
    accept: ".pageControl",
    drop: function(e,ui){
      $(this).append(
        $(ui.draggable).clone()
        .css({
          position:"absolute",
          top: e.clientY-e.offsetY,
          left: e.clientX-e.offsetX
        })
       .draggable({containment:"parent"}) 
      );
    }
  }
);