Question

I’m developing a site where you can move different “modules” (squares with information) from one place to another in the page with jQuery UI.

My problem is that when I drag one module to a droppable zone, the place recognized by the script is the middle of the module and not the mouse position.

I don’t know if it is posible to have a workaround this, but I could figure out yet.

I made this fiddle: http://jsfiddle.net/nicosunshine/vMpNA/3/ that shows the problem.

Thank you in advance!.

Answer 1

Just set the tolerance of the droppable to pointer, ie

jQuery("#dropHere").droppable({
 drop: function(){
        console.log("dropped!");
    },
    over: function (event, ui) {
        jQuery(this).addClass("over");
    },
    out: function (event, ui) {
        jQuery(this).removeClass("over");
    },
    tolerance: 'pointer'
});

http://jsfiddle.net/vMpNA/4/

Documentation