欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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、运行效果图如下:

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

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript切换特效与技巧总结》、《javascript动画特效与技巧汇总》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》、《javascript中json操作技巧总结》、《javascript错误与调试技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。