可拖动对象背后的技术是什么？

Question

我正在尝试学习如何通过纯 JavaScript 而不是使用外部库来使 HTML 页面中的 div 可拖动，因此我尝试了一些技术，但未能使其成为适当的可拖动对象。我确信我的代码中遗漏了一些重要的东西，所以我想知道可拖动对象背后的基本思想是什么。我试图通过设置一些 startX 和 startY 位置并使 Div 位置绝对并通过 css 设置 div 的左侧和顶部来实现它

p.style.left = (e.clientX-startX) + 'px';

p.style.top =  (e.clientY-startY) + 'px';

// where p is the element i am trying to make draggable

Answer 1

您不应忘记保存 p 的初始位置并每次添加它，以确保您正在进行相对计算。目前，您假设开始拖动时 p 始终位于 (0, 0) 位置。

其次，取消 selectstart 事件可以避免在拖动时创建丑陋的选择。

我对您的代码进行了一些更新： http://jsfiddle.net/rLegF/1/ 。

var p = document.getElementById("p"),
    startX, startY,
    origX, origY,
    down = false;

document.documentElement.onselectstart = function() {
    return false; // prevent selections
};

p.onmousedown = function(e) {
    startX = e.clientX;
    startY = e.clientY;

    origX = p.offsetLeft;
    origY = p.offsetTop;

    down = true;
};

document.documentElement.onmouseup = function() {
    // releasing the mouse anywhere to stop dragging
    down = false;
};

document.documentElement.onmousemove = function(e) {
    // don't do anything if not dragging
    if(!down) return;

    p.style.left = (e.clientX - startX) + origX + 'px';
    p.style.top  = (e.clientY - startY) + origY + 'px';
};

编辑：您还可以结合使用startX和origX，因为您基本上总是在做- startX + origX：< a href="http://jsfiddle.net/rLegF/2/" rel="nofollow">http://jsfiddle.net/rLegF/2/。

然后，您要做的就是计算鼠标相对于元素左上角的位置，然后将该位置设置为新的鼠标位置减去旧的鼠标位置。也许这样更直观一些。

我也清理了一些。