Как создать новый элемент на курсоре DOM

Question

Как бы я мог создать новый элемент и разместить его там, где находится мышь / курсор? У меня есть пример кода ниже:

<div id = "adivthing></div>

<script>
var newthing = document.createElement("input");                
document.getElementById("adivthing").appendChild(newthing); 
</script>

Answer 1

Если вы используете свойства стиля position: fixed или position: absolute для элемента newthing, то вы можете использовать свойства left и top для перемещения элемента вокруг поля.

Если вы получаете координаты мыши из своего инициирующего события (например, щелчка), вы можете добавить соответствующие left и top к вашему элементу.

Пример ниже:

function createInput(event){
  var newthing = document.createElement("input");                
  document.getElementById("adivthing").appendChild(newthing); // Your existing code


  // get the coordinates of the mouse
  var x = event.clientX;     // get the horizontal coordinate
  var y = event.clientY;   // get the vertical coordinate

  // position newthing using the coordinates
  newthing.style.position = "fixed"; // fixes el relative to page. Could use absolute.
  newthing.style.left = x + "px";
  newthing.style.top = y + "px";
}

/* Optional - Making new things more obvious in the pen */
input{
    height: 10px;
    width: 50px;
    background: red;
}

#adivthing{
    height: 600px;
    width: 600px;
    background: blue;
}

<!-- Onclick event added to your existing markup -->
<div id="adivthing" onclick="createInput(event)"></div>