Question

Ok so I have a normal jQuery UI sortable, and I need to select the div in which I’m dropping my element into. I normally get this by using ui.item.parent(‘div’) in the received event.

However, on the over event that variable relates to the sender of the element (where it has been dragged from) rather than what it is hovering over. So how do I select where I am dropping my element.

An example I have at the moment that just prints the parent element’s offset:

$(".connectedSortable").sortable({
    over:function(event,ui){

        console.log(ui.item.closest('div').offset())
},
connectWith: ".connectedSortable"
}).disableSelection();

edit:

I created a really simple example to show what I am doing:

http://jsfiddle.net/2Zbwc/4/

Basically when you drag a row from the first table to the next one you see in the console that it has offset.left as 0. I need the offset.left of the new table.

Answer 1

You could use a placeholder and then select the parent of the placeholder class.

http://jsfiddle.net/BnZMA/

$( ".sortable" ).sortable({
    connectWith: '.sortable',
    helper: 'clone',
    placeholder: "placeholder",
    over:function(event,ui){
        console.log($('.placeholder').parent().attr('id'));
    },
});