Question

我一直试图在我点击的位置放置一个<div>元素。

这是我想要定位的div

<main class="">
    <div class="overlay"></div>
    @Html.Raw(ViewBag.Breadcrumb)
    <div class="split">
        <div class="half">
            <div class="section-head">
                <i class="section-icon fa fa-calendar"></i>
                <h2>mon Calendrier</h2>
                <small>Dates à retenir</small>
            </div>
            <div class="calendar-container">
                <!-- CALENDAR -->
                <div class="action-calendar"></div>
                <!-- TOOLTIP -->
                <div class="tooltip-wrapper">
                    <div class = "day-event">
                        <span class="title"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

这是绑定到日历上的事件（如果我有一个与之关联的事件的日期）。我想要获得的是，一旦我点击日期，我希望将<div>放置在鼠标点击的位置。

在我寻找可以帮助我的东西时找到了这个 [How do I position a div next to a mouse click using JQuery?但它没有帮助我。 div正在改变位置，但在我点击的位置甚至没有接近。

这是应该做的诀窍的代码：

var tooltip_HTML = $(".day-event .title").html();
var position = $(".action-calendar a.ui-state-active").parent().offset();
$(".tooltip-wrapper").css({ top: position.top, left: position.left })

CSS

.tooltip-wrapper .title{
    color:#ffffff; 
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.tooltip-wrapper{
    position: absolute; 
    z-index: 2000;
    width: 100%
}

.tooltip-wrapper .day-event {
    background: #000000; 
    position: relative; 
    width:250px;
    color: #FFFFFF;
    /*height: 100px;*/ 
    line-height: 20px;
    text-align: center;  
    border-radius: 10px;
    opacity: 0.9;
    filter: Alpha(opacity=90);
    z-index: 10000;
}

.tooltip-wrapper span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; 
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

事情是，它改变了位置，但没有改变它的位置。

谢谢。

Answer 1

event.pageX和event.pageY可以获得鼠标相对于页面的最左上方部分的水平和垂直位置。当您设置position: absolute时。它的顶部和左侧值将根据它的相对父容器进行设置。

因此你得到了错误的坐标。要解决此问题，您必须在<body>之后设置父容器，并将其设置为width: 100%;设置父容器position: relative;。现在，由于您已获得整个页面宽度和高度，event.pageX和event.pageY将为top和left位置提供正确的坐标

Answer 2

您的代码有拼写错误。您应该使用event.pageY，event.pageX更新e.pageY，e.pageX。

var container = $(".action-calendar");
$(document).mouseup(function (e) {
     if (!container.is(e.target) && container.has(e.target).length === 0) {
          tooltip_HTML = $(".day-event .title").html();
          $(".day-event .title").html(tooltip_HTML);
          $(".day-event").fadeOut(500);
     }
     var monthEvents = $('td.dayEvent');
     $.each(monthEvents, function (key, td) {
     var x = $(td).children().attr('id', 'dayEvent-' + key);
     });
     $(".tooltip-wrapper").css({ position: "absolute", top: e.pageY, left: e.pageX });
});

顺便说一下，我不知道你.tooltip-wrapper的详细信息。但是这个元素不应该有一个具有相对位置的父元素。因为如果有，.tooltip-wrapper将通过自己的父母定位自己。

单击位置<div>标记

2 个答案: