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

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);
    })
})

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`;
})

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>

否则，您需要根据之前的元素计算偏移量（因为每次单击后按钮的偏移量都会改变）。

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);
    })
})