JQuery UI Drag and Drop

Question

I am developing a site where you can move different "modules" (squares with information) from one place to another on a page with the jQuery user interface.

My problem is that when I drag one module into the reset zone, the place recognized by the script is the environment of the module, not the mouse point.

I do not know if it is possible to have a workaround, but I could still find out.

I made this script: http://jsfiddle.net/nicosunshine/vMpNA/3/ , which shows the problem.

Thank you in advance!

Answer 1

Just set the droppable pointer tolerance to the pointer, i.e.

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