After dropping the draggable div in the drop zone, it always moves to the top left corner. I want it to stay where I dropped it, right in the middle of the drop zone.
I've been trying to adjust the CSS properties for positioning, but so far I haven't found a solution that works properly.
Here is my current JavaScript code:
$('.tab-list img').draggable({
helper: "clone"
});
$('#main').droppable({
drop:function(event, ui) {
var item = $(ui.draggable);
var add;
if(item.data('itemstate') == 'rectangle'){
add = '<div class="pi-rectangle"></div>';
}
$(add).css('left', ui.position.left);
$(add).css('top', ui.position.top);
console.log(ui.position.top);
console.log(ui.position.left);
$(add).appendTo(this);
}
});