第一次拖放后拖放（javascript）中断答案

【问题标题】：Drag and Drop (javascript) breaks after first drop第一次拖放后拖放（javascript）中断
【发布时间】：2011-02-20 16:07:29
【问题描述】：

所以，它的作用是：你可以成功地将某个东西拖动到任何地方，但是当你再次单击它时，它会重置到原来的位置（我不知道为什么），当你再次尝试拖动它时，只要您的光标触摸它消失的对象（我不知道为什么）。我希望有人能告诉我为什么会这样以及如何解决它！

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

最后，也是最重要的，感谢大家的宝贵时间 =]

【问题讨论】：

虽然滚动你自己的完全有效，但 jQuery UI 已经经过实战测试的 Draggable 和 Droppable 插件使这种事情变得更容易。
（在另一条评论中说）这是我第一次尝试（曾经）用 javascript 制作东西。在学习如何使用库之前，我想学习如何使用基本语言。（我在做东西时学习。）
您不仅要学习 JavaScript，还要解决跨浏览器的不兼容性问题。检查这里散布的变通办法的数量：github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.mouse.js 所以如果你真的不想使用 Draggable 和 Droppable，我建议你至少使用 jquery.ui.mouse 作为跨浏览器工作的坚实基础。

标签： javascript drag-and-drop

【解决方案1】：

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>

【讨论】：

我添加了一个快速调试测试，posX 和 posY 正在存储值。在获取光标等位置时，我从浏览过的众多教程中获得了逻辑。我添加了参数，但问题仍然存在。一旦我解决了这个问题，我将重新编写代码以使用 ondrag() 事件，但我仍然不知道它为什么会发生。另外，一旦我让它在其中一个中工作，我会尝试添加跨浏览器兼容性=p
感谢您在 move() 函数中添加 if 语句。现在我明白你的意思了。很有意义。但是，当我将更改添加到 posX 和 posY 变量时，拖放不再起作用。
@Dbz 哎呀，我不喜欢使用在 mozilla 中不起作用的动态 css 方法。我已将其更改为 Mozilla 解决方案。如果你想要跨浏览器的东西，几乎任何好的 js 框架都具备这种能力。 :D
clientX/clientY 不会给您从主体顶部的偏移量，而是从浏览器当前视口的顶部。 developer.mozilla.org/en/DOM/event.clientY

【解决方案2】：

这个答案可能会让我投下反对票，但这到底是怎么回事。你有没有想过使用 jQuery 和 jQuery UI 库。他们有一个非常好的拖放功能：Draggable。这可能更容易使用，然后尝试自己解决。

【讨论】：

这是我第一次尝试（曾经）用 javascript 制作东西。在学习如何使用库之前，我想学习如何使用基本语言。（我在做东西时学习。）

【解决方案3】：

试试这个

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>

【讨论】：

您好！我非常感谢修复，但我仍然不知道问题的根源 =/
我在您的代码中看到的一个问题是，每次按下 p-tag 时，您都会调用拖动函数和拖动函数附加事件侦听器。你只需要在一个元素上附加一个事件一次。
不幸的是，我无法弄清楚如何在不添加 onmousemove="function" 或 ondrag="function" 到 <p> 的情况下进行拖放操作。跨度>