droppable draggable append to position

Question

When i drop the draggable div in the drop zone, it is going to the top left corner. Then then one after goes below it.

I need it so if i drop it in the middle of the drop zone, then it will append when i left it. So i am trying to use the positions and setting the css but its not working

here is my js

$('.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);
        }
    });

Your question is not clear. Are you saying that you want to leave the element being dragged in the exact position where it is dropped? — Rory McCrossan, Aug 10 '14 at 16:55
yes, so if i drop it in the center, i want it to stop there. at the moment its jumping to the top left — user3613245, Aug 10 '14 at 16:56
@Harsh definitely was not just one minute but I digress. Its fine — Scott Mitchell, Aug 10 '14 at 17:25

score 0 · Answer 1 · answered Aug 11 '14 at 08:23

0

i figured it out anyway

$(add).css('left', ui.position.left-80+'px').css('top', ui.position.top-80+'px').appendTo(this);

answered Aug 11 '14 at 08:23

user3613245

79
2
11

droppable draggable append to position

1 Answers1