JS实现的简单拖拽功能示例
程序员文章站
2022-04-07 09:25:41
本文实例讲述了js实现的简单拖拽功能。分享给大家供大家参考,具体如下:
1、实例代码:
...
本文实例讲述了js实现的简单拖拽功能。分享给大家供大家参考,具体如下:
1、实例代码:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>js实现拖拽</title> <style> #water{ width:400px; height:188px; background-color: #ff6600; } #water:hover{ cursor: pointer; } </style> </head> <body> <div id="water"></div> <script> draginit("water");//调用 //拖拽初始化 function draginit(id){ var $div = document.getelementbyid(id); var style = { position: "absolute", left: "0", top: "0" } for(var k in style){ $div.style[k] = style[k];//设置关键css } $div.onmousedown = function(e){//鼠标按键按下 e = e || window.event; var x = e.clientx - $div.offsetleft;//鼠标到左上角的距离信息, 固定不变 var y = e.clienty - $div.offsettop; document.onmousemove = function(e){//鼠标移动 e = e || window.event; var l = e.clientx - x; var t = e.clienty - y; var pw = document.documentelement.clientwidth;//页面宽度 var ph = document.documentelement.clientheight; var divw = $div.offsetwidth;//dom宽度 var divh = $div.offsetheight; // 范围限定 if(l < 0){ l = 0; } if(t < 0){ t = 0; } if(l > pw - divw){ l = pw - divw; } if(t > ph - divh){ t = ph - divh; } // 范围限定 end $div.style.left = l + "px"; $div.style.top = t + "px"; }; document.onmouseup = function(e){//鼠标按键松开 document.onmousemove = null; }; }; } </script> </body> </html>
2、运行效果图如下:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript切换特效与技巧总结》、《javascript动画特效与技巧汇总》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》、《javascript中json操作技巧总结》、《javascript错误与调试技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。