javascript简易版拖拽实现
2018-02-08 10:43
363 查看
<!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> #div1 {width:100px; height:100px; background:red; position:absolute;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function () { var oDiv=document.getElementById('div1'); var disX=0; var disY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft;//存下鼠标与div边界的横纵坐标 disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0)//防止页面被拖拽出可视区 { l=0; } else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) { l=document.documentElement.clientWidth-oDiv.offsetWidth; } if(t<0) { t=0; } else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) { t=document.documentElement.clientHeight-oDiv.offsetHeight; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.onmouseup=function () { document.onmousemove=null; document.onmouseup=null; }; return false;//阻止浏览器默认行为 }; }; </script> </head> <body> <div id="div1"></div> </body> </html>
代码实现了简易的拖拽功能,主要目的是记住clientX和clientY的使用以及边界概念的深化。
当然代码还是有bug,当用户把浏览器全屏并且把div拖拽到右下角并缩小可视区时,div消失不见,这留待以后的学习中改进。
相关文章推荐
- 怎么用 javascript 实现拖拽
- 简易而又灵活的Javascript拖拽框架(二)
- javascript实现拖拽并替换网页块元素
- JavaScript实现拖拽预览,AJAX小文件上传
- JavaScript实现拖拽预览,AJAX小文件上传
- Javascript实现网页中元素的拖拽
- javascript实现类似google和msn space的拖拽
- 用Javascript实现鼠标拖拽网页表单(4)
- JavaScript实现[网易云音乐Web站登录窗口]拖拽功能
- JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
- javascript:浮动div,可拖拽div,遮罩层(div和iframe实现)
- javascript:浮动div,可拖拽div,遮罩层(div和iframe实现)
- [转]JavaScript简单实现div拖拽
- javascript中实现拖拽drag & drop效果的几种方法
- javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
- JavaScript实现拖拽预览,AJAX小文件上传
- JavaScript实现拖拽预览,AJAX小文件上传
- 基于JavaScript实现右键菜单和拖拽功能
- Javascript实现Div可拖拽 (jquery)
- 用javascript实现对div的拖拽功能的实现过程