gpt4 book ai didi

javascript - 你如何监听在 JavaScript 中移动的 HTML 元素?

转载 作者:可可西里 更新时间:2023-11-01 02:41:32 29 4
gpt4 key购买 nike

我有一个 HTML 元素,我需要跟踪另一个元素。具体来说,我需要将两个元素的左上角和右上角定位相同。调整窗口大小时,会触发调整大小事件,我可以调整依赖元素的位置。但是,如果被跟踪的元素被重新定位(但未调整大小),我看不到任何 DOM 事件。

我们如何知道 DOM 元素是否已被移动?我们正在使用最新的 jQuery。

这是一个代码示例。

请注意,elementOnemouseTracking div 用于显示因“某些”原因而移动的元素,这超出了我的代码的控制范围。

  1. 此代码适用于 elementOne 案例。
  2. MouseTrackingTracker 不跟踪移动元素。
  3. ResizerTracker 在溢出情况下不会在完整文本周围放置边框。

无论跟踪元素的更改原因如何,我都希望 trackingDivs 移动和调整大小。

此代码依赖于窗口大小调整作为 Hook 事件。 Hook 一些在元素更改其尺寸时触发的事件更接近我的需要。

<!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 触发自定义事件。

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

});

因此,您可以通过一些手动编码自己提供事件 Hook ,这很有用,因为并非所有浏览器都完全支持 DOMAttrModified 等很酷的事件。不利的一面是,您必须自己做所有事情。

关于javascript - 你如何监听在 JavaScript 中移动的 HTML 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7074907/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com