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

纯js实现div的拖拽功能

2011-06-23 09:45 786 查看

为了实现纯js编写的div拖拽的功能，在网上找了一些资料但是还是感觉没有说到点子上去

个人觉得div的拖拽需要三个主要的事件

1.onmousedown鼠标按下事件

2.onmousemove鼠标移动事件

3.onmouseup鼠标按键抬起事件

但是里面有一个问题就是onmousemove是什么时候起作用呢，所以这个需要特意标示出来

页面html代码和css如下

<html>

<head>

<title>移动Div</title>

<style type="text/css" rel="stylesheet">

#movediv{

width:100px;height:100px;position:absolute;border:1px solid #000;background:#EAEAEA;

cursor:pointer;

text-align:center;

line-height:100px;

left:100px;

top:10px;

}

</style>

</head>

<body>



<div id="movediv" style="left:20px;top:20px;" onmousedown="moveInit('movediv',event);" onmousemove="Move('movediv',event)" onmouseup="stopMove()" onmouseout="stopMove()">move</div>

</body>

</html>

对应的函数在下面定义

<script language="javascript" type="text/javascript">

var _IsMousedown = 0;

var _ClickLeft = 0;

var _ClickTop = 0;

function moveInit(divID,evt){

_IsMousedown = 1;

if(getBrowserType() == "NSupport"){

return;

}

var obj = getObjById(divID);

if(getBrowserType() == "fox"){

_ClickLeft = evt.pageX - parseInt(obj.style.left);

_ClickTop = evt.pageY - parseInt(obj.style.top);

}else{

_ClickLeft = evt.x - parseInt(obj.style.left);

_ClickTop = evt.y - parseInt(obj.style.top);

}

}

function Move(divID,evt){

if(_IsMousedown == 0){

return;

}

var objDiv = getObjById(divID);

if(getBrowserType() == "fox"){

objDiv.style.left = evt.pageX - _ClickLeft;

objDiv.style.top = evt.pageY - _ClickTop;

}else{

objDiv.style.left = evt.x - _ClickLeft;

objDiv.style.top = evt.y - _ClickTop;

}

}

function stopMove(){

_IsMousedown = 0;

}

function getObjById(id){

return document.getElementById(id);

}

function getBrowserType(){

var browser=navigator.appName;

var b_version=navigator.appVersion;

var version=parseFloat(b_version);

if ((browser=="Netscape")){

return "fox";

}else if(browser=="Microsoft Internet Explorer"){

if(version>=4){

return "ie4+";

}else{

return "ie4-";

}

}else{

return "NSupport";

}

}

</script>

moveInit一看代码就知道在鼠标按下的时候起作用

在该函数里面改变了_IsMousedown的值，其实_IsMousedown 就是之前提到的特殊标示

改变_IsMousedown 的目的就是表示出onmousemove在这一刻启用

每次我们都会判断 _IsMousedown 的值

所以在我们停止走onmousemove里面的内容时，我们只需要改变_IsMousedown 的值，使之赋值为0即可

以上说的是事件如何处理，

其实还有一个重点就是div的坐标的问题，当我们在鼠标移动的时候需要时时的去改变div的坐标，在改变坐标的时候有一个东西需要注意的就是鼠标相对于被拖拽元素的位置，这也是为什么我们在 onmousedown事件函数里面写evt.pageX - parseInt(obj.style.left);/ _ClickTop = evt.pageY - parseInt(obj.style.top);的原因

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

标签：

相关文章推荐

新的分享

章节导航