Question

那么，它做了什么：你可以在任何地方成功地拖动它，但是当你再次点击它时，它会重置到它的原始位置（我不知道为什么），当你再次尝试拖动它时，你的光标接触它消失的对象（我不知道为什么）。我希望有人能告诉我它为什么会发生以及如何解决它！

// JavaScript Document

var posX;
var posY;
var element;

function drag() {

element = document.getElementById("square");
posX = event.clientX;
posY = event.clientY;

element.addEventListener("mousemove", move, false);
}

function move() {

    element.addEventListener("mouseup", drop, false);

    element.style.left = event.clientX - posX + "px";
    element.style.top = event.clientY - posY + "px";
}

function drop() {

    element.removeEventListener("mousemove", move, false);
    element.removeEventListener("mouseup", drop, false);
}

html很简单（位置设置为相对）：

<p id="square" onmousedown="drag(event)"> {MEEP {1}}

最后，最重要的是，谢谢大家的时间=]

Answer 1

这个答案可能会给我一个downvote，但是到底是什么。你有没有想过使用jQuery和jQuery UI库。他们有一个非常好的工作拖放：Draggable。这可能更容易使用，然后尝试自己解决。

Answer 2

试试这个

function drag(element) {
    element.style.left = event.clientX + 'px';
    element.style.top = event.clientY + 'px';
}

<p id="square" ondrag="drag(this);" ondragend="drag(this);">meep</p>

Answer 3

posX = event.clientX;
posY = event.clientY;

问题是这些值总是设置为从主体顶部的咔嗒声的偏移量，而不是从方形元素的顶部。他们第一次工作正常，因为身体顶部的偏移与元素的偏移是相同的，因为它的位置正好靠在身体上。一旦你移动它，它就会从你身体移动到的地方偏离身体的一侧。当您使用鼠标拖动它时，它将移动它，鼠标的位置移动到刚移动它的像素数。这通常会将其完全移出屏幕。您希望元素随鼠标移动，其中元素的顶部保持在相对于鼠标的相同位置。

如果这没有意义，发表评论，我会尽量让它更清晰一点。：d

这对我有用：

<html>
<head>
<script type="text/javascript">
// JavaScript Document

var posX;
var posY;
var element;

function drag(event) {                //added event parameter

element = document.getElementById("square");
posX = event.clientX - parseInt(  element.offsetLeft );  //this is the big change!
posY = event.clientY - parseInt(  element.offsetTop );

element.addEventListener("mousemove", move, false);
}

function move(event) {                  //added event parameter
    if (typeof(document.getElementById("square").mouseup) == "undefined") {  //this just prevents redundantly adding the same event handler repeatedly, even though duplicates are removed anyway
        element.addEventListener("mouseup", drop, false);
    }

    element.style.left = event.clientX - posX + "px";
    element.style.top = event.clientY - posY + "px";
}

function drop() {

    element.removeEventListener("mousemove", move, false);
    element.removeEventListener("mouseup", drop, false);
}
</script>
<style type="text/css">
body {
 width: 1000px;
 height: 1000px;
 background-color: blue;
 }

p {
 position: relative; 
 background-color: red;
 width: 100px;
 height: 100px;
 left: 1px;
 top: 1px;
}

</style>
<body>
<p id="square" onmousedown="drag(event)">meep</p>
</body>
</html>

首次丢弃后拖放（javascript）中断

3 个答案: