Jquery Drag and Drop Issues with position, help!

Question

Hi, 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 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);
    }
});

});

Answer 1

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
  }
});