Question

我想知道如何将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;

任何人都可以告诉我该怎么做。谢谢，

Answer 1

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

获取鼠标位置（点击时）：

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

然后将位置发送到函数以更改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";
}

DEMO

Answer 2

试 document.body.addEventListener('click', function(e) {console.log(e)}) 你有一个mouseevent对象，其属性clientX，clientY给出了鼠标点击的位置。然后，您可以使用它来重新定位div。

Answer 3

您需要在px和d.style.left之后添加d.style.top。

试试这个：

<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>

以下是一个示例：http://jsfiddle.net/s99d4/

Answer 4

<强> JS

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

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

<强> CSS

div {
    position: absolute;    
}

JSFiddle

Answer 5

您可以使用这个简单的Jquery行而不是那些复杂的路径。

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


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

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

然后在用户点击的任何位置移动它。见FIDDLE

编辑：没关系，不是所有这些看起来都那么复杂...... Goodluck。 :)

希望这有帮助。

麦克

Answer 6

使用

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";

Answer 7

以下是此代码的完整功能：

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

如何移动＆＃34; div＆＃34;使用Javascript到某些坐标？

7 个答案: