J'ai un élément HTML que je dois suivre un autre élément. Plus précisément, je dois avoir en haut à gauche et à droite coins supérieurs des deux éléments de positionner la même. Lorsqu'une fenêtre se redimensionnée, l'événement resize se déclenche et je peux ajuster la position de l'élément à charge. Toutefois, si l'élément est repositionné en cours de suivi (mais pas redimensionnée), je ne vois aucun événement DOM.
Comment peut-on savoir si un élément DOM a été déplacé? Nous utilisons la dernière jQuery. P>
Voici un exemple de code. P>
Notez que Je voudrais que les trackingDivs pour se déplacer et redimensionner peu importe la raison pour les raisons de l'élément chenillé pour changer. P> Ce code repose sur la Redimensionnement de fenêtre étant l'événement accroché. Accrocher un événement qui se déclenche lorsque l'élément change ses dimensions est plus proche de ce que je dois. P> elementOne code> et mouseTracking code> divs sont là pour montrer des éléments qui sont déplacés pour "une" raison qui est en dehors du contrôle de mon code. P>
elementOne code> cas. Li>
MouseTrackingTracker code> ne suit pas un élément mobile. Li>
ResizerTracker code> ne met pas la bordure autour du texte complet dans le cas de trop-plein. Li>
Ol> <!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>
3 Réponses :
Il y a le Domattrmodified événement, mais sa seule implantée dans firefox et chrome . Mais comme vous avez besoin d'une fonction JavaScript pour démarrer l'élément en mouvement, vous pouvez tirer un événement personnalisé avec jQuery Dans cet endroit.
et la documentation répertorie les événements DomattrModified comme obsolète :-(
Vous pouvez déclencher des événements personnalisés avec jQuery chaque fois que vous reposiez l'élément.
$( 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")
});
});
Je ne repositionnez pas l'élément que je suive. J'ai essayé votre solution et malheureusement, cela ne fonctionne pas pour mes cas d'utilisation. Voir la mise à jour de la question originale.
Malheureusement, il n'y a pas d'événements fiables pour vous dire quand un élément se déplace ou est redimensionné. Vous pouvez recourir à l'interrogation em> l'élément, bien que cela ne soit pas nécessairement la solution la plus performante: #wrapper-around-element-to-track
{
position: relative;
}
#tracked-element
{
position: absolute;
/* set top and left to position, if necessary */
}
#tracking-element
{
position: absolute;
/* set top and left to position, if necessary */
}
Toute réflexion sur la manière de gérer le texte qui coule à l'extérieur de l'élément (Resizer lorsque "Texte vraiment long est affiché"). Les dimensions de revendeur n'incluent pas le texte débordé. Cependant, je dois trouver un moyen d'inclure ce texte débordé à ma bordure et de gérer correctement les clics de souris sur la partie débordée du texte.
Pouvez-vous montrer du code? Comment l'élément est-il repositionné, etc.?
Exemple ajouté. J'espère que ça aide.
duplicaillard possible de Comment savoir quand un élément DOM se déplace ou est redimensionné