如果DIV在ID为area的div中,即可拖拽。我在Drag函数里做了对父div的判断。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>鼠标拖拽</title>
<script type="text/javascript">
function Drag(o, e){
if(o.parentElement!=document.getElementById('area')) return
var e = window.event || e
var _x = e.offsetX || e.layerX
var _y = e.offsetY || e.layerY
o.style.filter = 'Alpha(opacity=70)'
o.style.opacity = '0.7'
document.onmousemove = function(e){
var e = window.event || e
o.style.left = e.clientX - _x + 'px'
o.style.top = e.clientY - _y + 'px'
o.style.cursor="move"
}
document.onmouseup = function(e){
document.onmousemove = null
o.style.filter = o.style.opacity = ''
o.style.cursor="default"
}
}
</script>
</head>
<body>
<div id='area'>
<div onmousedown="Drag(this, event)" style="position:absoluteborder:1px solid redbackground:pinkwidth:400pxheight:300px"></div>
</div>
<div onmousedown="Drag(this, event)" style="position:absoluteleft:500pxborder:1px solid redbackground:pinkwidth:400pxheight:300px"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#main div{position:absolutewidth:220pxheight:150pxborder:1px solid #999}
</style>
<script type="text/javascript">
var a
document.onmouseup=function(){if(!a)returndocument.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)a=""}
document.onmousemove=function (d){if(!a)returnif(!d)d=eventa.style.left=(d.clientX-b)+"px"a.style.top=(d.clientY-c)+"px"}
function $(o,e){a=odocument.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE)b=e.clientX-parseInt(a.style.left)c=e.clientY-parseInt(a.style.top)}
</script>
</head>
<body>
<div id="main">
<div style="left:100pxtop:100pxbackground:#fc9" onmousedown="$(this,event)">1</div>
<div style="left:400pxtop:100pxbackground:#9cf" onmousedown="$(this,event)">2</div>
<div style="left:700pxtop:100pxbackground:#f9c" onmousedown="$(this,event)">3</div>
<div style="left:100pxtop:300pxbackground:#9fc" onmousedown="$(this,event)">4</div>
<div style="left:400pxtop:300pxbackground:#c9f" onmousedown="$(this,event)">5</div>
<div style="left:700pxtop:300pxbackground:#cf9" onmousedown="$(this,event)">6</div>
</div>
</body>
</html>
粘贴源码 试试看
前两天看错了,没能理解你的意思。今天碰巧又逛进来了所以修改了下,看符合你的要求不。
希望更简洁的代码?
那么使用eq(index)方法吧。一行代码解决你的问题。
//
//x:要在A中查找,x=1,在B中找:x=2...
//y:要找num1 y=1,找num2 y=2,.....
//
function getObj(x,y)
{
return $("body>div").eq(x-1).find("div").eq(y-1)
}
使用方法:
$(function())
将查找出D中的num3并显示其text
希望能帮助到你。
如果对您有帮助,请记得采纳为满意答案,谢谢!祝您生活愉快!
vaela