我有一个应该在它的父级中移动的目标,在该父级中单击该父级。
一些小提琴:http: //jsfiddle.net/GmerZ/
一些HTML:
<div id="rControl">
<p>R1 / R2</p>
<div class="widget">
<div class="target"></div>
</div>
</div>
一些通过 CoffeeScript 的 jQuery:
rControl = $('#rControl')
widget = rControl.find '.widget'
target = rControl.find '.target'
clicked = no
widget
.mousedown =>
clicked = yes
.mouseup =>
clicked = no
.mousemove (e) =>
if clicked
target.css
top: "#{e.offsetY}px"
left: "#{e.offsetX}px"
问题是您拖动时目标会抖动。好像是第一个事件把widget放在了光标下,第二个事件发生在target而不是widget背景上,所以现在偏移量是相对于target,而不是父widget,offset值很多更小。目标现在错误地移动到小部件的左上角。
显然,目标不应该处理这些事件,也不应该根据目标的位置提供点击位置信息。
.widget
无论鼠标是否在.target
?
另外,我很乐意这样做,而无需重新排列 HTML 以强制目标在小部件下,我必须缺少一些棘手的事件委托魔术。