您的位置：首页 > Web前端 > JavaScript

Drag And Drop In Javascript

2008-02-04 11:59 357 查看

1. capture the mouse coordinates

function getMouseOffset(target, ev){

ev = ev || window.event;

var docPos = getPosition(target);

var mousePos = mouseCoords(ev);

return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};

}

function getPosition(e){

var left = 0;

var top = 0;

while (e.offsetParent){

left += e.offsetLeft;

top += e.offsetTop;

e = e.offsetParent;

}

left += e.offsetLeft;

top += e.offsetTop;

return {x:left, y:top};

}

2. be clear when mouse button is pressed and when it is released

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mouseCoords(ev);

if(dragObject){

dragObject.style.position = 'absolute';

dragObject.style.top = mousePos.y - mouseOffset.y;

dragObject.style.left = mousePos.x - mouseOffset.x;

return false;

}

function mouseUp(){

dragObject = null;

}

function mouseDown(ev,item){

dragObject = item;

mouseOffset = getMouseOffset(item, ev);

return false;

}

3. when mouseMove you should care about the mouse coordiate

function mouseCoords(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

now the whole code is :

<html>

<head>

<title>Show Mouse Coordinates</title>

document.onmousemove = mouseMove;

document.onmouseup = mouseUp;

var dragObject = null;

var mouseOffset = null;

function getMouseOffset(target, ev)...{

ev = ev || window.event;

var docPos = getPosition(target);

var mousePos = mouseCoords(ev);

return ...{x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};

}

function getPosition(e)...{

var left = 0;

var top = 0;

while (e.offsetParent)...{

left += e.offsetLeft;

top += e.offsetTop;

e = e.offsetParent;

}

left += e.offsetLeft;

top += e.offsetTop;

return ...{x:left, y:top};

}

function mouseMove(ev)...{

ev = ev || window.event;

var mousePos = mouseCoords(ev);

if(dragObject)...{

dragObject.style.position = 'absolute';

dragObject.style.top = mousePos.y - mouseOffset.y;

dragObject.style.left = mousePos.x - mouseOffset.x;

return false;

}

function mouseUp()...{

dragObject = null;

}

function mouseDown(ev,item)...{

dragObject = item;

mouseOffset = getMouseOffset(item, ev);

return false;

}

function mouseCoords(ev)...{

if(ev.pageX || ev.pageY)...{

return ...{x:ev.pageX, y:ev.pageY};

}

return ...{

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

</script>

</head>

<body>

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航