如何将一个元素移动到鼠标位置

Question

我正在尝试在用户单击文档时移动一个元素，但是该元素会移动到偏移位置。如何在单击时删除偏移？我想让该元素移动到鼠标的确切位置，该如何实现？我需要使用.offset()函数吗？如果需要，我该怎么做？

HTML

Player Name:  <input type="text" name="name" id="name" /><br>
<button name="submt" id="meh">Submit</button>

JS

$(document).ready(function(){
    $(this).on("click", function(e){
        var x = e.pageX;
        var y = e.pageY;
        $("#meh").css("marginLeft", x);
        $("#meh").css("marginTop", y);
    })
})

- user3542456

---

你能同时发布这些元素的CSS吗？ - Rhumborl

我没有设置任何CSS样式。将其定位为绝对位置并更改jQuery CSS属性即可解决问题。 - user3542456

Answer 1

<div class="soccer-field">
<div class="ball"></div>
</div>

var container = document.querySelector(".soccer-field");
container.addEventListener('click', function (event) {
  var x = event.clientX;
  var y = event.clientY;
  var ball = document.querySelector(".ball");
  ball.style.position = "absolute";
  ball.style.left = `${x}px`;
  ball.style.top = `${y}px`;
})

- Malek Zarzour

Answer 2

将元素的位置设置为绝对定位，并使用左和上偏移量来控制它，可能比使用外边距更容易：

$(document).ready(function() {
  $(this).on("click", function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var el = $("#meh");
    el.css('position', 'absolute');
    el.css("left", x);
    el.css("top", y);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Player Name:
<input type="text" name="name" id="name" />
<br>
<button name="submt" id="meh">Submit</button>

否则，您需要根据前面的元素计算偏移量（因为按钮的偏移量将在每次单击后更改）。

- Shomz

---

我无法想象为什么，但只有在我将y值减少50时才能正常工作。 - Mátyás Horváth

确实很奇怪。有没有可能存在一个父元素带有50像素的边距或类似的属性？ - Shomz

Answer 3

请使用left和top，同时确保使用绝对或相对定位：

$(document).ready(function(){
    $(this).on("click", function(e){
        var x = e.pageX;
        var y = e.pageY;
        $("#meh").css("left", x);
        $("#meh").css("top", y);
    })
})

- Bhojendra Rauniyar