Вопросы Теги

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

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

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

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

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

  1. Этот код работает для случая elementOne .
  2. MouseTrackingTracker не отслеживает движущийся элемент.
  3. ResizerTracker не помещает границу вокруг всего текста в переполнение case.

Я бы хотел, чтобы 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>
10
задан JJJ 29 July 2017 в 14:02
поделиться