主页 / 问题 / 1444905
Accepted
gorden
Asked:2022-09-02 04:35:56 +0000 UTC2022-09-02 04:35:56 +0000 UTC

用鼠标移动 div 并使其位于左侧和顶部

  • 772

如何使当您用鼠标移动 div 时，它的左侧和顶部会立即显示？

        var div = document.getElementById('circle');
        var listener = (e) => {
          div.style.left = e.pageX - 50 + "px";
          div.style.top = e.pageY - 50 + "px";
        };
        
        circle.addEventListener('mousedown', e => {
            document.addEventListener('mousemove', listener);
        });
        
        circle.addEventListener('mouseup', e => {
            document.removeEventListener('mousemove', listener);
        });
        console.log(div)
        .block1 {
          width: 100px;
          height: 100px;
          position: absolute;
          left: 50px;
          top: 50px;
          border-radius: 50%;
          background: blue;
        }
    <html lang="en">
    <body>
      <div class="block1" id="circle"></div>
    </body>
    </html>

javascript

1 个回答

  1. Best Answer

    您已经拥有所需的一切：

    • 有跟踪光标移动的鼠标事件处理程序
    • 光标和圆的位置有一个实际值
    div.style.left = e.pageX - 50 + "px";
div.style.top = e.pageY - 50 + "px";

    当你移动鼠标时你会得到它们。
    要获得 left 和 top 的值，请从它们中减去圆的半径

    剩下的就是简单地在界面中显示它们。
    为此，您必须首先添加将在其中显示信息的块的布局

    <div id="position_panel">
    <strong>left</strong> = <span id="left_value"></span><br/>
    <strong>top</strong> = <span id="top_value"></span>
</div>

    在将直接显示值的元素中，最好在博客中临时添加id属性，以便以后可以在JS中找到它们，以便更新这些元素中的文本。

    它们的标识符分别是 left_value 和 top_value。

    为了让面板始终在一个位置并且不干扰任何人，让我们为其添加绝对定位。

    #position_panel {
    position: absolute;
    width: 90px;
    height: 40px;
    padding: 10px 30px;
    background-color: #343434;
    color: #FFFFFF;
}

    对比鲜明的设计让您可以立即注意到它们

    在 JS 中，你必须首先获取给定的元素

    var leftValue = document.getElementById('left_value'),
    topValue = document.getElementById('top_value');

    而在处理程序中，只需将这些元素内部的文本设置为相同的值即可。
    为此，指定innerText我们感兴趣的元素的属性值就足够了

    var listener = (e) => {
    // ...
    leftValue.innerText = e.pageX - 50;
    topValue.innerText  = e.pageY - 50;  
};

    因为 e.pageX - 50并e.pageY - 50在设置文本和设置圆的偏移量时使用两次 - 我们将它们作为单独的变量发布

    var left = e.pageX - 50,
    top  = e.pageY - 50;

    他们已经可以投入到文本和样式中

    全部的：

    var div = document.getElementById('circle'),
    leftValue = document.getElementById('left_value'),
    topValue = document.getElementById('top_value');


var listener = (e) => {
  var left = e.pageX - 50,
      top = e.pageY - 50;
  
  div.style.left = left + "px";
  div.style.top  = top + "px";
  
  leftValue.innerText = left;
  topValue.innerText  = top;  
};

circle.addEventListener('mousedown', e => {
    document.addEventListener('mousemove', listener);
});

circle.addEventListener('mouseup', e => {
    document.removeEventListener('mousemove', listener);
});
console.log(div)
    .block1 {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 50px;
    border-radius: 50%;
    background: blue;
}
#position_panel {
    position: absolute;
    width: 90px;
    height: 40px;
    padding: 10px 30px;
    background-color: #343434;
    color: #FFFFFF;
}
    <html lang="en">
    <body>
      <div id="position_panel">
          <strong>left</strong> = <span id="left_value">0</span><br/>
          <strong>top</strong> = <span id="top_value">0</span>
      </div>
      <div class="block1" id="circle"></div>
    </body>
    </html>

    • 1

相关问题