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
Post a Comment