js或jq多个父层内拖动怎样实现？
以下代码是一个js父层内拖动的效果。我想弄多个这样的效果用变量怎么实现？
比如我想加一个：<div id="google1"><div id="main1">
<style type="text/css">
body{background:#ccc;}
.block{position:absolute;left:0;top:100px;border:1px solid #000;background:red;width:30px;height:30px;}
#google{width:300px;height:300px;border:2px inset #fff;background:#fff;position:relative;overflow:hidden;}
</style>
<div id="google"><div id="main" class="block"></div></div>
<script type="text/javascript">
//<![CDATA[
function Drag(title,body,range){
var w=window,win=body||title,x,y,_left,_top,range=range||function(x){return x};
title.style.cursor='move';
title.onmousedown=function (e){
e=e||event;
x=e.clientX,y=e.clientY,_left=win.offsetLeft,_top=win.offsetTop;
this.ondragstart=function(){return false};
document.onmousemove=e_move;
document.onmouseup=undrag
};
function e_move(e){
e=e||event;
var cl=range(_left+e.clientX-x,'x'),ct=range(_top+e.clientY-y,'y');
win.style.left=cl+'px';
win.style.top=ct+'px';
w.getSelection?w.getSelection().removeAllRanges():
document.selection.empty();
};
function undrag(){this.onmousemove=null};
};
function $(x){return typeof x=='string'?document.getElementById(x):x};
var google=$("google"),main=$('main');
var max={
x:google.offsetWidth-main.offsetWidth-4,
y:google.offsetHeight-main.offsetHeight-4
}
Drag(
main,
false,
function(x,type){return Math.max(0,Math.min(max[type],x))}
)
//]]>
</script>
大家可以复制代码测试下，以上是一个拖动的效果，我想子啊一个页面弄2个3个。。。更多的这样的效果，大神帮下~~谢谢
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #ccc;
}
.block {
position: absolute;
left: 0;
top: 100px;
border: 1px solid #000;
background: red;
width: 30px;
height: 30px;
}
#google {
width: 300px;
height: 300px;
border: 2px inset #fff;
background: #fff;
position: relative;
overflow: hidden;
}
</style>
<script type="text/javascript">
function Drag (title, body, range)
{
var w = window, win = body || title, x, y, _left, _top, range = range || function (x)
{
return x;
};
title.style.cursor = 'move';
title.onmousedown = function (e)
{
e = e || w.event;
x = e.clientX, y = e.clientY, _left = win.offsetLeft, _top = win.offsetTop;
this.ondragstart = function ()
{
return false;
};
document.onmousemove = e_move;
document.onmouseup = undrag
};
function e_move (e)
{
e = e || event;
var cl = range (_left + e.clientX - x, 'x'), ct = range (_top + e.clientY - y, 'y');
win.style.left = cl + 'px';
win.style.top = ct + 'px';
w.getSelection ? w.getSelection ().removeAllRanges () : document.selection.empty ();
}
function undrag ()
{
this.onmousemove = null
}
};
function $ (x)
{
return typeof x === 'string' ? document.getElementById (x) : x
};
onload = function ()
{
var max =
{
x : google.offsetWidth - main.offsetWidth - 4,
y : google.offsetHeight - main.offsetHeight - 4
};
Drag (main, false, function (x, type)
{
return Math.max (0, Math.min (max[type], x))
});
Drag (main1, false, function (x, type)
{
return Math.max (0, Math.min (max[type], x))
});
};
</script>
</head>
<body>
<div id="google">
<div id="main" class="block"></div>
</div>
<div id="google1">
<div id="main1" class="block"></div>
</div>
</body>
</html>追问
恩，实现了，但是有一点不明白，为什么google1没有定义也能实现功能？
追答规则的id值，可以直接写，不规则的要用你的方法写。
追问我定义了google1的宽度，但不管用
这里的代码是否也用下变量，貌似只有google值：
var max =
{
x : google.offsetWidth - main.offsetWidth - 4,
y : google.offsetHeight - main.offsetHeight - 4
};