鼠标相对于div的位置 [英] Mouse position relative to div

问题描述

我正在使用jquery ui进行拖放.我正在尝试获取相对于div的鼠标位置，这是我的代码:

$( "#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( this );
  }
});

但是删除的div的位置不正确，有人可以告诉我代码有什么问题吗?

解决方案

在这里看看:

http://docs.jquery.com/Tutorials:Mouse_Position

上面的jQuery文档页面已损坏.这是一个替代方法:

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

event.pageX和event.pageY应该可以为您提供鼠标位置

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

这是一个示例，显示了如何跟踪相对于要拖动元素的鼠标位置 http://jsfiddle.net/87fqr/1/

另一个

如果您想要鼠标相对于可放置对象的位置，这应该可以工作:

$("#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( this );
    }
});

此处提供了更完整的示例: http://jsfiddle.net/87fqr/2/

I am using jquery ui for drag and drop. I am trying to get mouse position relative to div, here is my 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( this );
  }
});

But the position of dropped div is not correct, Can anybody please tell me what is wrong with code?

解决方案

Take a look here:

http://docs.jquery.com/Tutorials:Mouse_Position

EDIT: The jquery docs page above is broken. Here is an alternate:

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

event.pageX and event.pageY should give you 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 an example showing how to track the mouse position relative to the element you are dragging http://jsfiddle.net/87fqr/1/

ANOTHER EDIT:

This should work if you want the position of the mouse relative to the 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( this );
    }
});

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

这篇关于鼠标相对于div的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！