简单的拖放代码

Question

简单的拖放代码

Kay*_*ote 11 javascript drag-and-drop draggable drag

我正在努力与看似简单的JavaScript练习,写一个香草拖放.我想我的'addeventlisteners'犯了一个错误,这里是代码:

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);
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

iRe*_*tor 11

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

有两个主要问题,首先是使用onmousedown,onmousemove和onmouseup.我相信这些仅用于附加事件:

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

Run Code Online (Sandbox Code Playgroud)

虽然mousedown,mousemove并mouseup为事件听众:

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

Run Code Online (Sandbox Code Playgroud)

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

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);
}

Run Code Online (Sandbox Code Playgroud)

顺便说一句,我必须让目标的位置绝对让它起作用.

Answer 2

den*_*bot 11

你也可以试试这个小提琴,http://jsfiddle.net/dennisbot/4AH5Z/

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titulo de mi pagina</title>
<style>
    #target {
        width: 100px;
        height: 100px;
        background-color: #ffc;
        border: 2px solid blue;
        position: absolute;
    }
</style>
<script>
   window.onload = function() {
        var el = document.getElementById('target');
        var mover = false, x, y, posx, posy, first = true;
        el.onmousedown = function() {
            mover = true;
        };
        el.onmouseup = function() {
            mover = false;
            first = true;
        };
        el.onmousemove = function(e) {
            if (mover) {
                if (first) {
                    x = e.offsetX;
                    y = e.offsetY;
                    first = false;
                }
                posx = e.pageX - x;
                posy = e.pageY - y;
                this.style.left = posx + 'px';
                this.style.top = posy + 'px';
            }
        };
   }
</script>
</head>
<body>
    <div id="target" style="left: 10px; top:20px"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年前
查看次数：	22096 次
最近记录：	9 年前