我这有个js的效果，我想循环调用怎么改呢

这是一个保持在一个div的拖动效果，可惜写死了，固定id为mian，我想在添加一个id为mian1的怎么弄？怎样改成动态的呢？<scripttype="text/java... 这是一个保持在一个div的拖动效果，可惜写死了，固定id为mian，我想在添加一个id为mian1的怎么弄？怎样改成动态的呢？
< script type = "text/javascript" >
var a;
document.onselectstart = document.ondragstart = document.oncontextmenu = function() {
return false
};
document.onmouseup = function() {
if (!a) return;
document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
a = ""
};
document.onmousemove = function(d) {
if (!a) return;
if (!d) d = event;
var x = d.clientX - b;
var y = d.clientY - c;
x = x < $('main').offsetLeft ? $('main').offsetLeft : x;
x = x > $('main').offsetLeft + $('main').offsetWidth - a.offsetWidth ? $('main').offsetLeft + $('main').offsetWidth - a.offsetWidth : x;
y = y < $('main').offsetTop ? $('main').offsetTop : y;
y = y > $('main').offsetTop + $('main').offsetHeight - a.offsetHeight ? $('main').offsetTop + $('main').offsetHeight - a.offsetHeight : y;
a.style.left = x + "px";
a.style.top = y + "px"
};

function move(o, e) {
a = o;
document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
b = e.clientX - parseInt(a.style.left);
c = e.clientY - parseInt(a.style.top);
o.style.zIndex = getMaxIndex() + 9
}
function $(id) {
return document.getElementById(id)
}
function getMaxIndex() {
var index = 0;
var ds = $('main').getElementsByTagName('li');
var l = $('main').getElementsByTagName('li').length;
for (i = 0; i < l; i++) {
if (ds[i].style.zIndex > index) ds[i].style.zIndex = 0
}
return index
} < /script>
以上是js代码，字数有限制，下面我在继续补充css和div
======== css 和 div ================
<style type="text/css">#main{width:1000px;height:600px;border:1px solid#000}#main li{position:absolute;width:220px;height:150px;cursor:move;border:1px solid#999;list-style-type:none}</style>
<div id="main">
<li style="left: 100px; top: 100px; background: #fc9;"onmousedown="move(this,event)">1</li><li style="left: 400px; top: 100px; background: #9cf;"onmousedown="move(this,event)">2</li>
</div> 展开

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

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

展开全部


<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>学了又学</title>
<style type="text/css">
.main {
	width: 1000px;
	height: 600px;
	border: 1px solid #000;
}

.main div {
	position: absolute;
	width: 220px;
	height: 150px;
	border: 1px solid #999;
	text-align: center;
	line-height: 150px;
	cursor: pointer;
}
</style>
<script type="text/javascript">
	var a;
    document.onselectstart = document.ondragstart = document.oncontextmenu = function ()
    {
	    return false;
    };
    document.onmouseup = function ()
    {
	    if (!a)
		    return;
	    document.all ? a.releaseCapture () : window.captureEvents (Event.MOUSEMOVE | Event.MOUSEUP);
	    a = "";
    };
    document.onmousemove = function (d)
    {
	    if (!a)
		    return;
	    d = d || window.event;
	    var x = d.clientX - b;
	    var y = d.clientY - c;
	    var p = a.parentElement;
	    x = x < p.offsetLeft ? p.offsetLeft : x;
	    x = x > p.offsetLeft + p.offsetWidth - a.offsetWidth ? p.offsetLeft + p.offsetWidth - a.offsetWidth : x;
	    
	    y = y < p.offsetTop ? p.offsetTop : y;
	    y = y > p.offsetTop + p.offsetHeight - a.offsetHeight ? p.offsetTop + p.offsetHeight - a.offsetHeight : y;
	    a.style.left = x + "px";
	    a.style.top = y + "px";
    };
    
    function move (o, e)
    {
	    a = o;
	    e = e || window.event;
	    document.all ? a.setCapture () : window.captureEvents (Event.MOUSEMOVE);
	    b = e.clientX - parseInt (a.style.left);
	    c = e.clientY - parseInt (a.style.top);
	    o.style.zIndex = getMaxIndex () + 1;
    }
    
    function $ (id)
    {
	    return document.getElementById (id);
    }
    
    function getMaxIndex ()
    {
	    var index = 0;
	    var ds = $ ('main').getElementsByTagName ('div');
	    var l = $ ('main').getElementsByTagName ('div').length;
	    for (i = 0; i < l; i++)
	    {
		    if (ds[i].style.zIndex > index)
			    index = ds[i].style.zIndex;
	    }
	    return index;
    }
    
    onload = function ()
    {
	    // 阁下以后如若还需main撒么滴，只需加进即可
	    var mains = [
	            "main", "main1", "main2"
	    ];
	    for ( var i = 0; i < mains.length; i++)
	    {
		    var divs = $ (mains[i]).getElementsByTagName ("div");
		    for ( var j = 0; j < divs.length; j++)
		    {
			    divs[j].onmousedown = function (e)
			    {
				    move (this, e);
			    }
		    }
	    }
    }
</script>
</head>
<body>
	<div id="main" class="main">
		<div style="left: 100px; top: 100px; background: #fc9;">1</div>
		<div style="left: 400px; top: 100px; background: #9cf;">2</div>
		<div style="left: 700px; top: 100px; background: #f9c;">3</div>
	</div>
	<div id="main1" class="main">
		<div style="left: 100px; top: 700px; background: #fc9;">1</div>
		<div style="left: 400px; top: 700px; background: #9cf;">2</div>
		<div style="left: 700px; top: 700px; background: #f9c;">3</div>
	</div>
	<div id="main2" class="main">
		<div style="left: 100px; top: 1300px; background: #fc9;">1</div>
		<div style="left: 400px; top: 1300px; background: #9cf;">2</div>
		<div style="left: 700px; top: 1300px; background: #f9c;">3</div>
	</div>
</body>
</html>

更多追问追答

追问

我加了个mian3，为什么不行，哪里操作不对吗？
 var mains = ["main", "main1", "main2", "main3" ];

        1

追答

复制，粘贴，新建html测试即可，我不止改了这些代码即可，让你原来的html更节俭，js稍加改动，html亦有改动，如上即可，采纳即可。

已赞过 已踩过<

评论收起

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

我这有个js的效果，我想循环调用怎么改呢

其他类似问题

为你推荐：