Какая техника за перетаскиваемыми предметами?

Question

Я пытаюсь узнать, как сделать div на странице HTML перетаскиваемым чистым JavaScript, а не с помощью внешней библиотеки, поэтому я попробовал некоторые из моих методов, но мне не удалось сделать его надлежащим перетаскиваемым объектом.я уверен, что мне не хватает чего-то важного в моем коде, поэтому я хочу знать, какова основная идея перетаскиваемого объекта.я пытался добиться этого, установив некоторые позиции 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/.

Затем вы рассчитываете положение мыши по отношению к верхнему левому углу элемента, а затем устанавливаете позицию на новую позицию мыши за вычетом этой старой позиции мыши.Возможно, это немного более интуитивно понятно.

Я тоже немного прибрался.