以下代码是一个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个。更多的这样的效果，大神帮下~~谢谢
拉丁的传说浏览 226回答 1
1回答
-
HUWWW
<!DOCTYPE HTML><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>
随时随地看视频慕课网APP
Java
JQuery