使用传统的js和css怎样实现在一个Div的范围中拖拽另一个Div. 请高手指教。

html-css016

使用传统的js和css怎样实现在一个Div的范围中拖拽另一个Div. 请高手指教。,第1张

以下直接可以运行。

如果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