У меня есть элемент HTML, который мне нужен для отслеживания другого элемента. В частности, мне нужно, чтобы верхний левый и верхний правые углы обоих элементов были расположены одинаково. Когда размер окна изменяется, срабатывает событие изменения размера, и я могу настроить положение зависимого элемента. Однако, если отслеживаемый элемент перемещается (но не изменяется), я не вижу никаких событий DOM.
Как мы можем узнать, был ли перемещен элемент DOM? Мы используем последнюю версию jQuery.
Вот пример кода.
Обратите внимание, что элементы elementOne и mouseTracking предназначены для отображения элементов, которые перемещаются по «некоторой» причине, которая находится вне контроля моего кода.
- Этот код работает для случая
elementOne.
MouseTrackingTracker не отслеживает движущийся элемент. ResizerTracker не помещает рамку вокруг всего текста в случае переполнения.
Я бы хотел, чтобы trackingDivs перемещался и изменял размеры независимо от причины изменения отслеживаемого элемента.
Этот код основан на изменении размера окна, являющемся перехваченным событием. Перехват какого-то события, которое происходит, когда элемент меняет свои размеры, ближе к тому, что мне нужно.
<!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>