实现可拖动div
实现可拖动div
- <!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>
- <title>自由拖动的DIV层方块</title>
- <meta http-equiv="content-type" content="text/html;charset=gb2312">
- <style type="text/css">
- #draggable{
- background-color:green;
- font-size:9pt;
- padding:30px;
- color:white;
- width:360px;
- height:324px;
- position:absolute;
- }
- </style>
- <script type="text/javascript">
- var rDrag = {
- o:null,
- init:function(o){
- o.onmousedown = this.start;
- },
- start:function(e){
- var o;
- e = rDrag.fixEvent(e);
- e.preventDefault && e.preventDefault();
- rDrag.o = o = this;
- o.x = e.clientX - rDrag.o.offsetLeft;
- o.y = e.clientY - rDrag.o.offsetTop;
- document.onmousemove = rDrag.move;
- document.onmouseup = rDrag.end;
- },
- move:function(e){
- e = rDrag.fixEvent(e);
- var oLeft,oTop;
- oLeft = e.clientX - rDrag.o.x;
- oTop = e.clientY - rDrag.o.y;
- rDrag.o.style.left = oLeft + 'px';
- rDrag.o.style.top = oTop + 'px';
- },
- end:function(e){
- e = rDrag.fixEvent(e);
- rDrag.o = document.onmousemove = document.onmouseup = null;
- },
- fixEvent: function(e){
- if (!e) {
- e = window.event;
- e.target = e.srcElement;
- e.layerX = e.offsetX;
- e.layerY = e.offsetY;
- }
- return e;
- }
- }
- window.onload = function(){
- var obj = document.getElementById('draggable');
- rDrag.init(obj);
- }
- </script>
- </head>
- <body>
- <div id="draggable">这个可以拖动！</a><div style="background-color:red;height:300px;"></div></div>
- </body>
- </html>
复制代码
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论