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

以下代码是单个父层内拖动单个子层的效果。比如我想加一个：<divid="google1"><divid="main1"></div><divid="main2"></di... 以下代码是单个父层内拖动单个子层的效果。
比如我想加一个：
<div id="google1">
<div id="main1"></div>
<div id="main2"></div>
<div>
<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">
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>
以上是单个效果，可以复制测试下展开

 我来答

1个回答

#热议# 在购买新能源车时，要注意哪些？

匿名用户
2015-01-29

展开全部

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<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>
</head>
<body>
	<div id="google">
		<div id="main" class="block"></div>
		<div class="block"></div>
		<div class="block"></div>
		<div class="block"></div>
		<div class="block"></div>
		<div class="block"></div>
	</div>
	<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 || w.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");
        var max =
        {
            x : google.offsetWidth - main.offsetWidth - 4,
            y : google.offsetHeight - main.offsetHeight - 4
        }
        var mains = google.getElementsByTagName ('div');
        for ( var i = 0; i < mains.length; i++)
        {
	        Drag (mains[i], false, function (x, type)
	        {
		        return Math.max (0, Math.min (max[type], x))
	        })
        }
	</script>
</body>
</html>

追问

在加一组同样的div怎么循环呢？

追答

给你，很好改的，这个代码是你写的么？那你怎么不知道改呢。

已赞过 已踩过<

评论收起

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

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

其他类似问题

为你推荐：