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

来源：才华咖本文已影响6.18K人

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

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

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(&&on==1)
{
whichButton=true;
}
else
{
if(on==0)
whichButton=true;
}
if(whichButton)
{
offset_x=parseInt(etLeft);
offset_y=parseInt(etTop);
usemove=function(mEvent)
{
var eEvent=mEvent||event; var oDiv=div_id;
var x=ntX-offset_x;
var y=ntY-offset_y;
=(x)+"px";
=(y)+"px";
}
}
}
function Milan_StopMove(oEvent)
{
usemove=null;
}
function div_Close(o) {lay="none";}
ad=function()
{ var omove=lementById("move"); var oclose=lementById("close");
usedown=function(){Milan_StartMove(event,ntNode)}
useup=function(){Milan_StopMove(event)}
ick=function(){div_Close(ntNode)}
}</script>

</head>

<body>

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

</div>

</body>

</html>

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

一.实现原理:

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

二.代码注释:

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

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

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

whichButton，声明一个变量，用来存储一个布尔值。

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

hButton=true，将变量的值设置为true。

(on==0)，在其他浏览器中，如果button属性值为0。

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

et_x=parseInt(etLeft)，获取鼠标指针坐标距离oDiv元素左边缘的距离。

et_y=parseInt(etTop)，获取鼠标指针坐标距离oDiv元素上边缘的距离。

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

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

oDiv=div_id，将对象的引用赋值给oDiv变量。

x=ntX-offset_x，获取被拖动div的左边缘距离窗口的距离。

y=ntY-offset_y，获取被拖动div的上边缘距离窗口的距离。

=(x)+"px"，设置left属性值。

=(y)+"px",设置top属性值。

tion Milan_StopMove(oEvent){usemove=null;} ，松开鼠标左键时的事件处理函数。

tion div_Close(o){lay="none";} ，点击叉号时的事件处理函数。

实例 JavaScript Div 代码拖动

相关内容

猜你喜欢

热门精选

JavaScript快速排序实现实例教程

JavaScript如何实现JSON.stringify

网页程序设计之实用JavaScript代码段

Javascript 继承实现例子参考

用javascript实现图片模糊到清晰载效果指南

php动态生成JavaScript代码

高效编写JavaScript代码的技巧

JavaScript中push(),join() 函数实例详解

JavaScript在Android的WebView中parseInt函数转换不正确

Javascript拓展String方法代码

最新文章

推荐阅读