Question

我的下面的项目，设置为当你点击球（别针）时，它会跟随，当你第二次点击时，球会返回到它的原始父级，并且新创建的球被附加到新创建的球上div，附加到单击的元素的父级。

我的目标：让点击成为新创建的球的确切位置。

问题：我有一个显示点击坐标的警报，当我点击后检查元素时，它显示新创建的球已经获得了这些属性。问题是，并非每一次它都恰好排列在我点击的位置。

我刚刚进入DOM操作，所以请详细解释，你是如何解决这个问题的。

以下是要审核的代码：

if (elementMouseIsOver != theFrigginPin) {

     console.log("the one we want, but doesn't look like its working further");
     alert("x: " + relativeX + " y:" + relativeY);
     elementMouseParent.append($newHiddenElement);
     pinnedPinPositioned.appendTo($newHiddenElement);
     pinnedPinPositioned = brandNewPin.css({
       left: relativeX,
       // left: e.clientX,
       //top: e.clientY
       top: relativeY
     });

   } else if (elementMouseIsOver == theFrigginPin) {
     console.log("hitthepin");

   } else {
     conosle.log("notquitesure");
   }

谢谢！

Answer 1

你的问题是关于相对论。您的图钉绝对定位于文本容器。这意味着left和top的值指定距离此容器边缘的距离，您可以根据代码中的完整浏览器窗口设置这些值。

要演示：在您的示例中向下滚动，然后尝试放置引脚。注意发生了什么。

您需要删除容器元素周围的所有边距/填充等，以便它们与窗口完全对齐，或者在代码中补偿这些。代码会更好。

建议：

单击图钉时记录鼠标位置。
使用top和left参数相对于鼠标移动图钉。
点击后，应用top和left的最后一个值。

通过这种方式，您可以通过相同的方式移动它们，因此可以保证它们的位置正确。

Answer 2

主要问题是你的针座，导致你的针脚x / y值依赖于针脚x / y。

这是一个更新的codepen（取出了一些标记/ js）。

这是它的脚本，稍微清理一下。

 $(document).ready(function() {
   var click = false,
     top = 0,
     left = 0;

   $(document).bind('mousemove', function(e) {    
     if (click == true) {    
       $('#thePin').css({
         left: e.pageX - left,
         top: e.pageY - top
       });
     }    
   });

   $('#thePin').draggable().click(function(e) {
     top = e.pageY - top;
     left = e.pageX - left;
     click = !click;    
     if (click == false) {
       var noPoint = document.getElementById("thePin").style.pointerEvents = "none";    
       var x = e.pageX,
         y = e.pageY,
         theFrigginPin = document.getElementById('thePin'),
         elementMouseIsOver = document.elementFromPoint(x, y);
       var brandNewPin = $('<div class="newPinnedPin" id="newPinnedPin"></div>');
       var eventTarget = e.target,
         pinnedPinPositioned = brandNewPin.css({
           left: left,
           top: top
         });

       if (elementMouseIsOver != theFrigginPin) {    
         elementMouseParent.append($newHiddenElement);
         pinnedPinPositioned.appendTo($newHiddenElement);
         pinnedPinPositioned = brandNewPin.css({
           left: left,
           top: top
         });

       } else if (elementMouseIsOver == theFrigginPin) {
         console.log("hitthepin");

       } else {
         conosle.log("notquitesure");
       }

     }
     return false;
   });

   $('html').click(function(e) {    
     click = false;    
   });    
 });

如何将新元素准确放置在用户点击的位置？

2 个答案: