js实现拖拽(参考网络)
2015-07-28 16:03
537 查看
<!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>
相关文章推荐
- 网络配置和文件服务器
- ***工具
- iOS开发网络数据之AFNetworking使用
- [stm32] SIM808模块之发短信\GPS\TCP\HTTP研究
- app 常见网络性能
- 网络安全协议比较(PKI SSH SSL SET)
- 如何解决XMLHttpRequest cannot load file~~~~~~~Origin 'null' is therefore not allowed access
- 网络攻击技术——Broken authentication
- ASIHTTPRequest异步请求
- HttpClient设置代理
- http及https了解
- wcf中netTcpBinding的元素构成
- [知识点]网络流之转换对偶图
- 网络编程系列之四 条件
- HTTP Streaming with FFMpeg and an Open Source Segmenter
- 如何实现基于tcp进行http交互
- 一种面向对象的TCP/IP中间件
- linux_c 网络开发日记(3)系统调用方式访问文件
- http、socket长连接和短连接
- Android访问网络,使用HttpURLConnection还是HttpClient?