logo标签列表

如何在JavaScript中监听HTML元素的移动？

javascriptjqueryjquery-events
11
我有一个HTML元素需要跟踪另一个元素。具体来说，我需要两个元素的左上角和右上角定位相同。当窗口大小调整时，resize事件会被触发，我可以调整依赖元素的位置。然而，如果被跟踪的元素被重新定位（但没有调整大小），我就看不到任何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>
你能展示一些代码吗？元素如何重新定位等等？ - Igoris Azanovas
我希望这可以帮助你。 - Pat
可能是重复的问题：如何知道DOM元素何时移动或调整大小 - thSoft
3个回答
4
您可以使用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等酷炫的事件在所有浏览器中都没有得到充分支持。缺点是，您必须全部自己完成。

我没有重新定位我正在跟踪的元素。我尝试了你的解决方案，不幸的是它对我的用例不起作用。请参见原问题的更新。 - Pat
4

很遗憾，目前没有可靠的事件可以告诉您元素何时移动或调整大小。虽然您可以采用轮询该元素的方法，但这并不一定是最高效的解决方案：

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，那么您也可以使用resize事件插件在任何元素上模拟调整大小的事件，但如果我记得上次查看它时，它只是像我之前提到的那样进行轮询。

有没有想法如何处理超出元素范围的文本（当“显示非常长的文本”时调整大小器）？调整大小器的尺寸不包括溢出的文本。但是，我需要想出一种方法来将溢出的文本包含在我的边框中，并正确处理鼠标点击文本的溢出部分。 - Pat
2
4
文档列出DOMAttrModified事件已经被弃用了 :-( - Pat
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接