如何将元素移动到鼠标位置
How to move an element to the mouse position
当用户单击文档时,我正在尝试移动元素,但是,该元素正在移动到偏移位置。 单击时如何删除偏移量? 我正在尝试让元素移动到鼠标的确切位置,我该怎么做? 我需要使用.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);
})
})
<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`;
})
绝对设置它的位置并使用左偏移量和顶部偏移量而不是边距控制它可能要容易得多:
$(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>
否则,您需要根据前面的元素计算偏移量(因为每次单击后按钮的偏移量都会更改)。
改用左和上,还要确保使用绝对或相对定位:
$(document).ready(function(){
$(this).on("click", function(e){
var x = e.pageX;
var y = e.pageY;
$("#meh").css("left", x);
$("#meh").css("top", y);
})
})
相关文章:
- 跟踪jqplot垂直折线图的鼠标位置
- Javascript-在视频中跟踪鼠标位置
- 打开相对于鼠标位置的CSS3/HTML5模式对话框
- 如何控制quadraticCurve使用鼠标位置控制位置
- Javascript如何在不使用画布的情况下获取鼠标位置
- jQuery根据鼠标位置计算DIV偏移量和边界
- 在火狐浏览器的画布上获取鼠标位置
- 尝试绘制从鼠标位置工具栏中选择的形状 - HTML5 CANVAS
- 添加视图框时更改鼠标位置
- 如何在鼠标位置获取所有元素
- Three.js 3D缩放到鼠标位置
- 将鼠标位置(0,0)设置为画布的中心
- Unity 2d实例化鼠标位置问题,请告知
- 在原生JavaScript中获取画布中鼠标位置的最现代方法
- 如何在 Javascript 中正确获取鼠标位置
- 如何将元素移动到鼠标位置
- 使用 JavaScript 跟踪 Adobe Air 中的鼠标位置
- 三.js - 对象跟随鼠标位置
- 绘制在鼠标位置折叠的水平线和垂直线
- 在鼠标按下期间获取鼠标位置