简单的拖放效果

简单的拖放效果

by kixi

HTML

<div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">
    <p>我是拖拽示例DIV。</p>
    <p>可以试验一下效果。</p>
</div>

CSS

/*
清晰网
kixi.com.cn
从javascript开始
*/

JavaScript

//这个例子容易丢失焦点，请快速拖动试试

var dragging = false;
var test;
var mouseY;
var mouseX;

test = document.getElementById("test");
test.onmousedown = down;
test.onmousemove = move;
document.onmouseup = up;
test.style.position = "relative";
test.style.top = "0px";
test.style.left = "0px";


function down(event) {
    event = event || window.event;   //兼容IE的写法
    dragging = true;
    mouseX = parseInt(event.clientX);  //clientX要搞清楚请看kixi.com.cn的说明
    mouseY = parseInt(event.clientY);
    objY = parseInt(test.style.top);
    objX = parseInt(test.style.left);
}

function move(event) {
    event = event || window.event;
    if (dragging == true) {
        var x, y;
        y = event.clientY - mouseY + objY;
        x = event.clientX - mouseX + objX;
        test.style.top = y + "px";
        test.style.left = x + "px";
    }
}

function up() {
    dragging = false;
}