JavaScript实现的div拖动效果实例代码

时间:2020-09-13 16:13:01 JavaScript 我要投稿

JavaScript实现的div拖动效果实例代码

  在js中要如何实现div拖动的效果,下面YJBYS小编为你带来实例的代码实现段,希望对你有所帮助!

  js实现的div拖动效果实例代码:

  div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程。

  代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="" />

<title>js实现的div拖动效果实例代码</title>

<style type="text/css">

#oDiv{
position:absolute;
width:100px;
height:60px;
border:1px solid silver;
left:100px;
top:100px;
z-index:9999;}#move{
cursor:move;
width:100%;
height:15px;
background-color:#0066cc;
font-size:10px;}#close{
float:right;
width:10px;
height:100%;
cursor:hand;
background-color:#cc3333;
color:White;
font-size:15px;}

</style>

<script type='text/javascript'>

var offset_x;
var offset_y;
function Milan_StartMove(oEvent,div_id)
{

var whichButton;
if(document.all&&oEvent.button==1)
{
whichButton
=true;
}

else
{
if(oEvent.button==0)
whichButton
=true;
}

if(whichButton)
{
offset_x
=parseInt(oEvent.clientX-oDiv.offsetLeft);
offset_y
=parseInt(oEvent.clientY-oDiv.offsetTop);
document.documentElement.onmousemove
=function(mEvent)
{

var eEvent=mEvent||event; var oDiv=div_id;
var x=eEvent.clientX-offset_x;
var y=eEvent.clientY-offset_y;
oDiv.style.left
=(x)+"px";
oDiv.style.top
=(y)+"px";
}
}
}

function Milan_StopMove(oEvent)
{
document.documentElement.onmousemove
=null;
}

function div_Close(o) {o.style.display="none";}
window.onload
=function()
{
var omove=document.getElementById("move"); var oclose=document.getElementById("close");
omove.onmousedown
=function(){Milan_StartMove(event,this.parentNode)}
omove.onmouseup
=function(){Milan_StopMove(event)}
oclose.onclick
=function(){div_Close(this.parentNode.parentNode)}
}
</script>

</head>

<body>

<div id="oDiv">
<div id="move">
<div id="close">X</div>
</div>

</div>

</body>

</html>

  以上代码实现了div的拖动效果,下面简单介绍一下此效果的实现过程:

  一.实现原理:

  实现的原理非常的简单,就是将被拖动的.div设置为绝对定位,然后根据鼠标指针的坐标不断设定div的left和top属性值即可,当然在此过程中需要用到一些事件或者具体坐标的计算,这里就不介绍了,可以参阅代码注释。

  二.代码注释:

  1.var offset_x,声明一个变量用来存储鼠标指针距离div左边缘的距离。

  2.var offset_y,声明一个变量用来存储鼠标指针距离div上边缘的距离。

  3.function Milan_StartMove(oEvent,div_id){},此函数为move元素的onclick事件处理函数,第一个参数是事件对象,第二个是move元素的父元素。

  4.var whichButton,声明一个变量,用来存储一个布尔值。

  5.if(document.all&&oEvent.button==1){},如果在IE8和IE一下浏览器中,且event的button属性值为1,if(document.all)可用来是否是IE8和IE8以下浏览器,如果button属性值等于1,那么就是点击的鼠标左键。

  6.whichButton=true,将变量的值设置为true。

  7.if(oEvent.button==0),在其他浏览器中,如果button属性值为0。

  8.if(whichButton){},如果whichButton为true,也就是鼠标左键被按下。

  9.offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft),获取鼠标指针坐标距离oDiv元素左边缘的距离。

  10.offset_y=parseInt(oEvent.clientY-oDiv.offsetTop),获取鼠标指针坐标距离oDiv元素上边缘的距离。

  11.document.documentElement.onmousemove=function(mEvent){},为document对象注册onmousemove事件处理函数,之所以注册到document对象上,是利用了事件冒泡原理,否则有可能鼠标指针滑出div,导致拖动失效的现象。

  12. var eEvent=mEvent||event,事件对象的兼容性写法。

  13.var oDiv=div_id,将对象的引用赋值给oDiv变量。

  14.var x=eEvent.clientX-offset_x,获取被拖动div的左边缘距离窗口的距离。

  15.var y=eEvent.clientY-offset_y,获取被拖动div的上边缘距离窗口的距离。

  16.oDiv.style.left=(x)+"px",设置left属性值。

  17.oDiv.style.top=(y)+"px",设置top属性值。

  18.function Milan_StopMove(oEvent){document.documentElement.onmousemove=null;} ,松开鼠标左键时的事件处理函数。

  19.function div_Close(o){o.style.display="none";} ,点击叉号时的事件处理函数。


更多相关文章推荐:

1.最常用的20个javascript方法函数

2.学习JavaScript的7个理由

3.抽象语法树在JavaScript中的应用

4.JavaScript实现网页刷新代码段

5.perl- javascript中class的机制

6.JavaScript中的with关键字

7.高效编写JavaScript代码的技巧

8.JavaScript实现的div拖动效果实例代码

【JavaScript实现的div拖动效果实例代码】相关文章:

javaScript实现可缩放显示区效果代码11-10

Javascript简单实现面向对象编程继承实例代码11-18

jQuery实现的拖动调整表格单元格的大小代码实例11-11

javascript实现贪吃蛇代码11-18

JavaScript实现网页刷新代码段10-27

30行代码实现Javascript中的MVC10-28

JavaScript快速排序实现实例教程06-07

常用排序算法之JavaScript实现代码段10-27

php和javascript之间变量的传递实现代码11-18