Ich habe ein HTML-Element, das ich einem anderen Element zuordnen muss. Insbesondere muss ich die obere linke und obere rechte Ecke beider Elemente gleich positionieren. Wenn die Größe eines Fensters geändert wird, wird das Resize-Ereignis ausgelöst und ich kann die Position des abhängigen Elements anpassen. Wenn jedoch das verfolgte Element neu positioniert (aber nicht in der Größe geändert) wird, sehe ich kein DOM-Ereignis.
Wie kann man herausfinden, ob ein DOM-Element verschoben wurde? Wir verwenden die neueste jQuery.
Hier ist ein Codebeispiel.
Beachten Sie, dass elementOne y mouseTracking divs sind dazu da, Elemente anzuzeigen, die aus "irgendeinem" Grund, der außerhalb der Kontrolle meines Codes liegt, verschoben werden.
- Dieser Code funktioniert für die
elementOnecaso. MouseTrackingTrackerverfolgt kein sich bewegendes Element.ResizerTrackersetzt den Rahmen nicht um den gesamten Text im Überlauffall.
Ich möchte, dass sich die trackingDivs unabhängig von den Gründen für die Änderung des verfolgten Elements bewegen und ihre Größe ändern.
Dieser Code setzt voraus, dass die Größenänderung des Fensters das eingehängte Ereignis ist. Hooking einige Ereignis, das feuert, wenn das Element seine Dimensionen ändert ist näher an, was ich brauche.
<!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>
