将 div 放置在鼠标旁边，但在 div 中

Question

我使用以下代码将

mousediv

放置在单击鼠标的位置旁边。

$("#item").click(function(e) {
    $('#mousediv').css({ 'top': e.pageY -50,'left': e.pageX -10, 'position':'absolute' }).show()
})

效果很好，DIV 显示在鼠标附近。

我点击的链接位于一个名为

wrapper

的 div 中，当显示新的 div 时，它可能会溢出该 div。

是否有办法在单击鼠标的位置旁边显示

mousediv

，但对其进行限制，以便它不能离开包装器div？

谢谢

Answer 1

您可以将 .position() 与 .max() 或 .min()

一起使用

工作样本：

$("#item").click(function(e) {
console.log($('.wrapper-div').position());
  $('#mousediv').css({
    'top': Math.max($('.wrapper-div').position().top, 50),
    'left': Math.max($('.wrapper-div').position().left, 30),
    'position': 'absolute'
  }).show()
})

.wrapper-div {
  background: yellow;
  height: 200px;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper-div">
  <a href="javascript::viod(0);" id="item">Click Here</a>
  <div id="mousediv">Look I am changing!</div>
</div>
<br/>