我希望制作一个控件,用户可以在div中单击,然后拖动鼠标,然后松开鼠标,以便指示他们想要的东西有多长。(这是用于日历控件,因此用户将指示某个事件的时间长度)
看起来最好的方法是在父div上注册一个"mousedown“事件,然后在div上注册一个"mousemove”事件,直到"mouseup“事件被触发。"mousedown“和"mouseup”事件将定义时间范围的开始和结束,当我跟踪"mousemove“事件时,我可以动态更改范围的大小,以便用户可以看到他们正在做什么。我基于google日历中事件的创建方式。
我遇到的问题是,jQuery事件似乎只提供了引用整个页面的可靠鼠标坐标信息。有没有办法辨别引用父元素的坐标?
编辑:
下面是我正在尝试做的事情的图片:
发布于 2010-11-23 04:05:23
一种方法是使用jQuery offset
方法将事件中的event.pageX
和event.pageY
坐标转换为相对于父事件的鼠标位置。下面是一个示例,供将来参考:
$("#something").click(function(e){
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
});
发布于 2012-11-08 02:17:49
获取相对于当前单击元素的单击位置的步骤
使用此代码
$("#specialElement").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
});
发布于 2012-08-20 17:55:38
我使用了这段代码,它非常好用:)
<script language="javascript" src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$(".div_container").mousemove(function(e){
var parentOffset = $(this).parent().offset();
var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
var relativeYPosition = (e.pageY - parentOffset.top);
$("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
}).mouseout(function(){
$("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
});
});
</script>
https://stackoverflow.com/questions/4249648
复制相似问题