Как вы отслеживаете перемещение HTML-элемента в JavaScript?

У меня есть элемент HTML, который мне нужен для отслеживания другого элемента. В частности, мне нужно, чтобы верхний левый и верхний правый углы обоих элементов располагались одинаково. При изменении размера окна запускается событие изменения размера, и я могу отрегулировать положение зависимого элемента. Однако, если отслеживаемый элемент перемещается (но не меняет размер), я не вижу никаких событий DOM.

Как мы можем узнать, был ли перемещен элемент DOM? Мы используем последнюю версию jQuery.

Вот пример кода.

Обратите внимание, что блоки div elementOne и mouseTracking предназначены для отображения элементов, перемещаемых по "какой-то" причине, не зависящей от моего кода.

  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