Как слушате за HTML елемент, който се движи в JavaScript?

Имам HTML елемент, който ми трябва, за да проследя друг елемент. По-конкретно, трябва горният ляв и горният десен ъгъл на двата елемента да бъдат позиционирани еднакво. Когато прозорец се преоразмери, събитието за преоразмеряване се задейства и мога да коригирам позицията на зависимия елемент. Ако обаче проследяваният елемент е преместен (но не и преоразмерен), не виждам DOM събитие.

Как можем да разберем дали DOM елемент е бил преместен? Използваме най-новия jQuery.

Ето примерен код.

Имайте предвид, че elementOne и mouseTracking div са там, за да показват елементи, които се преместват по "някаква" причина, която е извън контрола на моя код.

  1. Този код работи за случая elementOne.
  2. MouseTrackingTracker не проследява движещ се елемент.
  3. 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>

javascript jquery jquery-events
person Pat    schedule 16.08.2011    source източник
comment
Можете ли да покажете някакъв код? Как се препозиционира елементът и т.н.?   -  person Igoris Azanovas    schedule 16.08.2011
comment
добавен пример. Надявам се това да помогне.   -  person Pat    schedule 17.08.2011
comment
възможен дубликат на Как да разбера кога DOM елемент се премества или преоразмерява   -  person thSoft    schedule 26.01.2015

Отговори (3)


arrow_upward
4
arrow_downward

Можете да активирате персонализирани събития с 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")
   });

});

Така че можете сами да осигурите куки за събития с малко ръчно кодиране, което е полезно, тъй като страхотни събития като DOMAttrModified и т.н. не се поддържат напълно във всички браузъри. Недостатъкът е, че трябва да направите всичко сами.

person BGerrissen    schedule 16.08.2011
comment
Не препозиционирам елемента, който проследявам. Изпробвах вашето решение и за съжаление то не работи за моите случаи на употреба. Вижте актуализация на оригиналния въпрос. - person Pat; 17.08.2011

arrow_upward
4
arrow_downward

За съжаление няма надеждни събития, които да ви кажат кога даден елемент се движи или преоразмерява. Бихте могли да прибегнете до изпитване на елемента, въпреки че това няма да е непременно най-ефективното решение:

setInterval(repositionElement, 10);

Друг вариант е да накарате вашия елемент да "проследява" другия елемент само чрез CSS. За да работи това, ще ви трябва "обвивка" около елемента, който проследявате, и другия елемент:

#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 */
}

Тъй като вече използвате jQuery, можете също да използвате приставката за събития за преоразмеряване за симулиране на събитието за преоразмеряване на който и да е елемент, но ако си спомням последния път, когато го погледнах, то просто прави анкетата, както споменах.

person Jacob    schedule 17.08.2011
comment
Някакви мисли за това как да се справя с текста, който тече извън елемента (преоразмеряване, когато се показва наистина дълъг текст). Размерите на преоразмерителя не включват препълнения текст. Все пак трябва да измисля начин да включа този препълнен текст в границата си и да обработвам правилно щракванията на мишката върху препълнената част от текста. - person Pat; 17.08.2011

arrow_upward
2
arrow_downward

Има събитието DOMAttrModified, но внедрява се само в Firefox и Chrome. Но тъй като имате нужда от JavaScript функция, за да започнете движението на елемента, можете да задействате персонализирано събитие с Jquery на това място.

person Andreas Köberle    schedule 16.08.2011
comment
и документацията изброява DOMAttrModified събития като отхвърлени :-( - person Pat; 17.08.2011