本文介绍了一个简单的HTML页面中实现元素拖拽效果的方法。通过使用JavaScript来控制元素的位置，使页面中的不同层可以被用户拖动到任意位置。该示例展示了如何通过监听鼠标事件并更新元素样式属性来达到这一目的。
<!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" xml:lang="en" lang="en"><head> <title></title>
<style type="text/css">
#l1{
#l1
position:absolute;top:100px;left:100px; width:100px;height:150px;border:1px solid #ccc; background:#f00; z-index:1
} #l2{ position: absolute;top:150px;left:150px; width:100px;height:150px;border:1px solid #666; background:#0f0; z-index:2 } #l3{ position: absolute;top:200px;left:200px; width:100px;height:150px;border:1px solid #999; background:#00f; z-index:3; }
</style> <script type="text/javascript"> var x,y,z,down=false,obj; function init(){ obj=event.srcElement; //获取焦点对象 obj.setCapture(); //设置鼠标捕捉 z=obj.style.zIndex; //取得原z轴位置 obj.style.zIndex=100; //设定在最上层 x=event.offsetX; //获取鼠标指针相对于触发事件的对象的x位置 y=event.offsetY; //获取鼠标指针相对于触发事件的对象的y位置 down=true; //设置鼠标状态为按下状态 } function moveIt(){ if(down&&event.srcElement==obj){ with(obj.style){ posLeft=document.body.scrollLeft+event.x-x; posTop=document.body.scrollTop+event.y-y; } } } function stopDrag(){ down=false; obj.style.zIndex=z; obj.releaseCapture(); } </script></head><body><div id="l1" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">level1</div><div id="l2" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">level2</div><div id="l3" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">level3</div></body></html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
