js或jq多个父层内拖动怎样实现？

以下代码是一个js父层内拖动的效果。我想弄多个这样的效果用变量怎么实现？比如我想加一个：<divid="google1"><divid="main1"><styletyp... 以下代码是一个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个。。。更多的这样的效果，大神帮下~~谢谢展开

 我来答

1个回答

#热议# 生活中有哪些实用的心理学知识？

匿名用户
推荐于2016-06-30

展开全部

<!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>

更多追问追答

追问

恩，实现了，但是有一点不明白，为什么google1没有定义也能实现功能？

追答

规则的id值，可以直接写，不规则的要用你的方法写。

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js或jq多个父层内拖动怎样实现？

其他类似问题

为你推荐：