Question

我有一个share-dialog，当用户单击它时我想移动它。在我的情况下，我有一个多个对话框，可以填充该对话框，并希望它与与此对话框关联的id一起移动。

我也在这里尝试了一些解决方案，但在任何错误/帮助/建议中，我在过程中都遇到了错误。

//对话框

<div className="share-request-dialog"  onClick={this.onClick(participant.id)}>
    <div className="alert-dialog-container">
        <---- dialog body --->
    </div>
</div>

///到目前为止，style.top和其他onClick = (partId, e) => { var divClass = '.share-request-dialog'+partId; // eslint-disable-next-line no-restricted-globals let Y = scrollY; debugger // partId[0].style.top = e.clientY + 'px'; divClass.offset().top = Y + 'px'; console.log("Div is clicked" + partId); }都已尝试使用此onClick函数

TypeError: divClass.offset is not a function

/错误

dict

//基本设计（屏幕可以相互打开，因此希望将每个按钮都移到屏幕顶部）

Answer 1

更新的答案

我注意到您的代码是用React编写的，您需要研究一下将CSS类切换到一个绝对位于左侧和顶部0的类。

或者您可以简单地将div样式的顶部设置为零，如下所示-Non React代码

如果您希望对话框在其他对话框的上方浮动 -只需使用z-index:<high value>来确保对话框在堆叠顺序中排在最前。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .share-request-dialog {
        background: blue;
        border: 1px solid red;
        height: 25px;
        top: 300px;
        position: absolute;
      }
    </style>
    <title>Static Template</title>
    <script>
      const getOffset = (partId) => {
        // eslint-disable-next-line no-restricted-globals
        // partId[0].style.top = e.clientY + 'px';
        event.target.style.top = 0 + "px";
        console.log("Div is clicked" + partId);
      };
    </script>
  </head>
  <body>
    <div class="share-request-dialog" onClick="javascript:getOffset(5)">
      <div class="alert-dialog-container">
        <---- dialog body ---> ss
      </div>
    </div>
  </body>
</html>

https://codesandbox.io/s/zen-agnesi-rybp4?file=/index.html

如何使用Onclick将React对话框移至主体顶部

1 个答案: