AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

JS实现的简单拖拽功能示例

51自学网 http://www.wanshiok.com
JS,拖拽

本文实例讲述了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程序设计有所帮助。


JS,拖拽  
上一篇:jQuery实现页面倒计时并刷新效果  下一篇:jQuery中layer分页器的使用