简单的拖放代码 [英] Simple drag and drop code

问题描述

我正在努力寻找一个简单的javascript练习，写一个香草拖放。我认为我的'addeventlisteners'犯了一个错误，这里是代码：

Im struggling with seemingly a simple javascript exercise, writing a vanilla drag and drop. I think Im making a mistake with my 'addeventlisteners', here is the code:

var ele = document.getElementsByClassName ("target")[0];
var stateMouseDown = false;
//ele.onmousedown = eleMouseDown;
ele.addEventListener ("onmousedown" , eleMouseDown , false);

function eleMouseDown () {
    stateMouseDown = true;
    document.addEventListener ("onmousemove" , eleMouseMove , false);
}

function eleMouseMove (ev) {
    do {
        var pX = ev.pageX;
        var pY = ev.pageY;
        ele.style.left = pX + "px";
        ele.style.top = pY + "px";
        document.addEventListener ("onmouseup" , eleMouseUp , false);
    } while (stateMouseDown === true);
}

function eleMouseUp () {
    stateMouseDown = false;
    document.removeEventListener ("onmousemove" , eleMouseMove , false);
    document.removeEventListener ("onmouseup" , eleMouseUp , false);
}

推荐答案

这是一个工作的jsfiddle ： http://jsfiddle.net/fpb7j/1/

Here's a jsfiddle with it working: http://jsfiddle.net/fpb7j/1/

有两个主要问题，第一个是使用 onmousedown ， onmousemove 和 onmouseup 。我相信这些仅用于附加事件：

There were 2 main issues, first being the use of onmousedown, onmousemove and onmouseup. I believe those are only to be used with attached events:

document.body.attachEvent('onmousemove',drag);

而 mousedown ， mousemove 和 mouseup 适用于事件监听器：

while mousedown, mousemove and mouseup are for event listeners:

document.body.addEventListener('mousemove',drag);

第二个问题是移动事件函数中的do-while循环。每次鼠标移动像素时都会调用该函数，因此不需要循环：

The second issue was the do-while loop in the move event function. That function's being called every time the mouse moves a pixel, so the loop isn't needed:

var ele = document.getElementsByClassName ("target")[0];
ele.addEventListener ("mousedown" , eleMouseDown , false);

function eleMouseDown () {
    stateMouseDown = true;
    document.addEventListener ("mousemove" , eleMouseMove , false);
}

function eleMouseMove (ev) {
    var pX = ev.pageX;
    var pY = ev.pageY;
    ele.style.left = pX + "px";
    ele.style.top = pY + "px";
    document.addEventListener ("mouseup" , eleMouseUp , false);
}

function eleMouseUp () {
    document.removeEventListener ("mousemove" , eleMouseMove , false);
    document.removeEventListener ("mouseup" , eleMouseUp , false);
}

顺便说一下，我必须让目标位置绝对让它起作用。

By the way, I had to make the target's position absolute for it to work.

这篇关于简单的拖放代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！