如何移动a"；分区；使用Javascript访问特定坐标？

我想知道，如何将div块动态定位到鼠标单击的位置

我知道如何动态获取单击的坐标值

我想知道如何将div块移动到该坐标

我在SO中尝试了以下代码，但没有任何效果

document.getElementById('someID').style.position='absolute';
document.getElementById('someID').style.left='500px';
document.getElementById('someID').style.top='90px';

和下面的代码

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos;
d.style.top = y_pos;

谁能告诉我怎么做吗。 谢谢，

试试看

document.body.addEventListener（'click'，函数（e）{console.log（e）}）

您得到了一个mouseevent对象，其属性clientX，clientY给出了鼠标单击的位置。

---

然后，您可以使用此选项重新定位分区。

您需要在

d.style.left

和

d.style.top

之后添加

px

试试这个：

<style>
#someID {
    position:absolute;
    left: 0px;
    top: 0px;
    height: 50px;
    width: 50px;
    background: red;
}
</style>


<div id="someID">
</div>

<script>

var ele = document.getElementById('someID');
document.onclick = function(e) {    
    ele.style.top = e.offsetY + "px";
    ele.style.left = e.offsetX + "px";
}

</script>

#某物{
位置：绝对位置；
左：0px；
顶部：0px；
高度：50px；
宽度：50px；
背景：红色；
}
var ele=document.getElementById（'someID'）；
document.onclick=函数（e）{
ele.style.top=e.offsetY+“px”；
ele.style.left=e.offsetX+“px”；
}

---

下面是一个例子：

您错过了职位分配句子中的单位

要获取鼠标位置（单击时）：

然后将位置发送到一个函数以更改div的位置，添加像素单位，别忘了

function moveDiv(x_pos,y_pos){
    var d = document.getElementById('myDiv');
    d.style.left = x_pos + "px";
    d.style.top = y_pos + "px";
}

完整代码：

(function() {
    window.onmousedown = handleMouseMove;
    function handleMouseMove(event) {
        event = event || window.event; // IE-ism
        console.log(event.clientX);
        moveDiv(event.clientX,event.clientY);
    }
})();

function moveDiv(x_pos,y_pos){
    var d = document.getElementById('myDiv');
    d.style.left = x_pos + "px";
    d.style.top = y_pos + "px";
}

JS

var a = document.getElementById('a');

document.onclick = function(e){  
      a.style.top = e.clientY + 'px';
      a.style.left = e.clientX + 'px'
}

div {
    position: absolute;    
}

CSS

var a = document.getElementById('a');

document.onclick = function(e){  
      a.style.top = e.clientY + 'px';
      a.style.left = e.clientX + 'px'
}

div {
    position: absolute;    
}

---

您可以使用这个简单的Jquery行，而不用走那些复杂的路线

$("#divId").hide();


$('body').click(function(event) {
  $("#divId").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
});

首先隐藏要移动的div（或不隐藏）

然后将其移动到用户单击的任何位置。看

编辑：没关系，不是所有的看起来都这么复杂。。。祝你好运

希望这有帮助

迈克

使用

d.style.position = "absolute";
d.style.top = "980px"; //or whatever
d.style.left = "970px"; //or whatever

记住，d.style.top是y轴，d.style.left是x轴。 所以,

d.style.top = e.clientY + "px";
           d.style.left = e.clientX + "px";

---

以下是此代码的完整函数：

document.onmousemove = getCoords;

function getCoords(e) {
e = e || window.event;
var x = e.clientX;
var y = e.clientY;
var div = document.getElementById("MYDIV");
div.style.position = "absolute";
div.style.top = y + "px";
div.style.left = x + "px";
}

---

请发布您的实际代码，包括检索鼠标坐标的代码，并可能添加一个（或类似的）来显示问题，因为您发布的代码，设置样式，本身就可以正常工作：类似的东西我发现这非常有用！