javascript - Mouse position relative to div -


i using jquery ui drag , drop. trying mouse position relative div, here code:

$( "#db_tables " ).droppable({   activeclass: "ui-state-default",   hoverclass: "ui-state-hover",   drop: function( event, ui ) {     var x = ui.position.left - ui.offset.left; // tired event.pagex - this.offsetleft;     var y = ui.position.top - ui.offset.top; // tired event.pagey - this.offsettop;     $( '<div style="margin-top:' + y   + 'px; margin-left:' + x   + 'px; "></div>' ).html( ui.draggable.html() ).appendto( );   } }); 

but position of dropped div not correct, can please tell me wrong code?

take here:

http://docs.jquery.com/tutorials:mouse_position

edit: jquery docs page above broken. here alternate:

http://api.jquery.com/event.pagex/

event.pagex , event.pagey should give mouse position

$("#drag").draggable({     stop: function(event, ui){         var x = event.pagex - ui.offset.left;         var y = event.pagey - ui.offset.top;            } }); 

edit: here's example showing how track mouse position relative element dragging http://jsfiddle.net/87fqr/1/

another edit:

this should work if want position of mouse relative droppable:

$("#db_tables").droppable({     activeclass: "ui-state-default",     hoverclass: "ui-state-hover",     drop: function( event, ui ) {             var offset = $(this).offset(),             x = event.pagex - offset.left,             y = event.pagey - offset.top;          $('<div style="margin-top:' + y + 'px; margin-left:' + x + 'px; "></div>' ).html( ui.draggable.html() ).appendto( );     } }); 

more complete example here: http://jsfiddle.net/87fqr/2/


Comments

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -