你如何监听在JavaScript中移动的HTML元素？ [英] How do you listen for a HTML element moving in JavaScript?
问题描述
我有一个HTML元素，我需要跟踪另一个元素。具体来说，我需要让两个元素的左上角和右上角定位相同。调整窗口大小时，会调用resize事件，我可以调整依赖元素的位置。但是，如果被跟踪的元素被重新定位（但未调整大小），我看不到任何DOM事件。
I have an HTML element that I need to track another element. Specifically, I need to have the top left and top right corners of both elements be positioned the same. When a window gets resized, the resize event gets triggered and I can adjust the position of the dependent element. However, if the element being tracked is repositioned (but not resized), I do not see any DOM event.
我们如何确定DOM元素是否已被移动？我们正在使用最新的jQuery。
How can we find out if a DOM element has been moved? We are using the latest jQuery.
这是一个代码示例。
请注意 elementOne 和 mouseTracking div是有的显示因代码控制范围之外的某些原因而被移动的元素。
Note that elementOne and mouseTracking divs are there to show elements that get moved for "some" reason that is outside the control of my code.
- 此代码适用于
elementOne案例。 -
MouseTrackingTracker不会跟踪移动元素。 -
ResizerTracker不会在溢出的情况下将完整文本的边框放置。
- This code works for the
elementOnecase. MouseTrackingTrackerdoes not track a moving element.ResizerTrackerdoes not put the border around the complete text in the overflow case.
我希望trackingDivs移动并调整大小，无论原因是什么对于被跟踪元素的更改原因。
I would like the trackingDivs to move and resize no matter the reason for the tracked element's reasons for changing.
此代码依赖于窗口大小调整是钩子事件。挂钩元素更改尺寸时触发的事件更接近我的需要。
This code relies on the window resize being the hooked event. Hooking some event that fires when the element changes its dimensions is closer to what I need.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<style type="text/css">
#elementOne { float : right;width : 200px; display:inline-block}
#resizer { float : left; display:inline-block}
.trackedDiv { width:50px; height:50px; background-color: blue }
.trackingDiv { position:absolute; z-index: 1; border:3px green; border-style: solid;}
</style>
<script>
$(function() {
$( window ).bind("resize",function(){
$("#elementOne").trigger("reposition");
$("#mouseTracking").trigger("reposition");
$("#resizer").trigger("reposition");
});
var repositionFunction = function(selfish, element){
var self = $(selfish);
var offset = self.offset();
var selfTop = offset.top;
var selfLeft = offset.left;
var selfWidth = self.width();
var selfHeight = self.height();
$(element).css({
top: selfTop,
left: selfLeft,
width : selfWidth,
height : selfHeight
});
}
$(document).mousemove(function(ev){
$("#mouseTracking").position({
my: "left bottom",
of: ev,
offset: "3 -3",
collision: "fit"
});
});
var timedShort = function() {
$('#resizer').html("Really short").resize();
setTimeout(timedLong, 10000);
}
var timedLong = function() {
$('#resizer').html("Really longggggggggggggggggggggggggggggggggggggggggggggggggggg text").resize();
setTimeout(timedShort, 10000);
}
setTimeout(timedLong, 10000);
$("#elementOne").bind("reposition",
function() { repositionFunction(this, "#elementOneTracker"); });
$("#mouseTracking").bind("reposition",
function() { repositionFunction(this, "#mouseTrackingTracker"); });
$("#resizer").bind("reposition",
function() { repositionFunction(this, "#resizerTracker"); });
});
</script>
</head>
<body>
<div class="trackedDiv" id="mouseTracking">tracks mouse</div>
<div class="trackingDiv" id="mouseTrackingTracker"></div>
<div style="clear:both;"></div>
<div class="trackedDiv" id="resizer">resizer: resizes</div>
<div class="trackingDiv" id="resizerTracker"></div>
<div class="trackedDiv" id="elementOne">elementOne: floats to the right</div>
<div class="trackingDiv" id="elementOneTracker"></div>
</body>
</html>
推荐答案
每当重新定位时，您都可以使用jquery触发自定义事件元素。
You can fire custom events with jquery whenever you reposition the element.
$( window ).bind("resize",function(){
$("#elementOne").css({
top: 200,
left: 200
}).trigger("reposition");
});
// and now you can listen to a "reposition event"
$("#elementOne").bind("reposition",function(){
var self = $(this);
$("#elementTwo").css({
top: self.css("top"),
left: self.css("left")
});
});
因此，您可以使用一些手动编码自己提供事件挂钩，这很有用，因为像DOMAttrModified和所以在所有浏览器中都不完全支持。缺点是，你必须自己完成。
So you can provide event hooks yourself with some manual coding, which is useful since cool events like DOMAttrModified and so on, are not fully supported in all browsers. The downside, you have to do it all yourself.
这篇关于你如何监听在JavaScript中移动的HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
