javascript实现鼠标拖动层效果代码:
这一章节介绍一下如何实现div的任意拖动效果，如果单纯就一个拖动效果或许没有多少实际的意义，不过它牵扯到不少的知识点，在掌握这个功能的同事能够对众多知识点有一个清晰的把握，下面就通过一个实例来介绍一下如何实现此功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div拖动效果代码-蚂蚁部落</title>
<style type="text/css">
#eldiv
{
width:140px;
height:100px;
background:#EEE;
position:absolute;
left:117px;
top:124px;
}
</style>
<script type="text/javascript">
var isDrag = false;
function isIE()
{
if(navigator.userAgent.indexOf("MSIE")>0)
{
return true;
}
else
{
return false;
}
}
function getStyle(object,attrName)
{
if(object.currentSyle)
{
return object.currentSyle[attrName];
}
if(window.getComputedStyle)
{
return window.getComputedStyle(object,null)[attrName];
}
}
function addListener(element,e,fn)
{
if(isIE())
{
element.attachEvent("on" + e,fn);
}
else
{
element.addEventListener(e,fn,false);
}
}
function drag(e)
{
var e = e || window.event;
var element = e.srcElement || e.target;
if(e.preventDefault)
{
e.preventDefault();
}
else
{
e.returnvalue=false;
}
isDrag = true;
var relLeft = e.clientX - parseInt(getStyle(element,"left"));
var relTop = e.clientY - parseInt(getStyle(element,"top"));
element.onmouseup = function(){ isDrag = false; }
document.onmousemove = function(e_move)
{
var e_move = e_move || window.event;
if(isDrag)
{
element.style.left=e_move.clientX - relLeft + "px";
element.style.top=e_move.clientY - relTop + "px";
return false;
}
}
}
window.onload = function()
{
var eldiv = document.getElementById("eldiv");
addListener(eldiv,"mousedown",drag);
}
</script>
<body>
<div id="eldiv"></div>
</body>
</html>
|
|