Question

我正在尝试创建一个完全提交点击的div，下面是我的尝试但没有发生任何事情。请有人请告诉我为什么好吗？

HTML：

<div id="commentArea"></div>
<div id="commentBox"></div>

JS：

var commentBox = $('#commentBox');  
var offset = -10;   
var posX, posY  
var boxCount = 0;

commentBox.click(function(e){
    $('#commentArea').append('<div class="box-' + boxCount + '"></div>');
    $('.box-' + boxCount).offset({
        top: posY,
        left: posX
    });
    boxCount++;     
});

的CSS：

#commentBox,
[class^=box] {
    width: 200px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    display: inline-block;
    z-index: 60;
    float: left;
}

[class^=box] {
    z-index: 1;
}

Answer 1

这将创建一个子div，在父（浅蓝色）div中单击鼠标。孩子的左上角将是鼠标点击的位置，但您可以根据需要通过计算高度和新孩子来调整。

document.getElementById("landingPad").addEventListener("click", function(event){
  var newDiv = document.createElement("div");
  newDiv.classList.add("addedDiv");
  newDiv.style.left = event.clientX - this.offsetLeft + "px";
  newDiv.style.top = event.clientY - this.offsetTop  + "px";
  
  this.appendChild(newDiv);
});

#landingPad {
  height: 300px;
  width: 300px;
  background-color: aliceblue;
  position: relative;
}

.addedDiv {
  height: 30px;
  width: 30px;
  background-color: blue;
  position: absolute;
}

<div id="landingPad"></div>

Answer 2

您的代码未设置posX和posY的值。

试试这个JavaScript。之后，随着你的变化而改变。

var commentBox = $('#commentBox');  
var offset = -10;   
var posX = 10, posY = 10;
var boxCount = 0;

commentBox.click(function(e){
    $('#commentArea').append('<div class="box-' + boxCount + '">' + boxCount + '</div>');
    $('.box-' + boxCount).offset({
        top: posY * boxCount,
        left: posX * boxCount
    });
    boxCount++;     
});

Answer 3

正如汉莱特解释的那样。如果你看看DOM，就会发生一些事情。

现在你也可以强制它显示一些元素，你会看到发生了什么。

Check out what I did here

我改变了

$('#commentArea').append('<div class="box-' + boxCount + '"></div>');

到

$('#commentArea').append('<div id="box-' + boxCount + '" class="box"></div>');

所以它的类是相同的，它可以被视觉化以及一些CSS。 id属性是动态的。

准确创建一个div提交点击的位置？

3 个答案: