愿我们努力拼搏,征战沙场,不忘初心,努力成为一个浑身充满铜臭味的有钱人。
本文实例讲述了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程序设计有所帮助。
到此这篇关于JS实现的简单拖拽功能示例就介绍到这了。气质是一个人独特的风貎,是从眼神、说话、举手投足之间流露出的特质,是一个人在涵养或修养的外在体现。气质看不着,但一举手、一投足、一张嘴就展现得淋漓尽致。美只是愉悦眼睛,而气质的优雅使人心入迷。气质是一个人最好看的样子。更多相关JS实现的简单拖拽功能示例内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!