JS实现的简单拖拽功能示例-创新互联

本文实例讲述了JS实现的简单拖拽功能。分享给大家供大家参考，具体如下：

创新互联技术团队10年来致力于为客户提供成都做网站、网站设计、品牌网站建设、网络营销推广、搜索引擎SEO优化等服务。经过多年发展，公司拥有经验丰富的技术团队，先后服务、推广了上1000+网站，包括各类中小企业、企事单位、高校等机构单位。

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>

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：JS实现的简单拖拽功能示例-创新互联
网页URL：https://www.cdcxhl.com/article26/dpddjg.html

成都网站建设公司_创新互联，为您提供外贸网站建设、企业网站制作、网站策划、用户体验、品牌网站建设、外贸建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容