Question

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

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：http://jsfiddle.net/rLegF/2/。

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

我也清理了一些。

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

1 个答案: