快捷導(dǎo)航

JS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例

更新時(shí)間：2017年03月13日 08:53:05 作者：繼續(xù)去踢波

這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能,涉及javascript鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能。分享給大家供大家參考，具體如下：

1、實(shí)例代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>js實(shí)現(xiàn)拖拽</title>
    <style>
      #water{
        width:400px;
        height:188px;
        background-color: #ff6600;
      }
      #water:hover{
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="water"></div>
    <script>
      dragInit("water");//調(diào)用
      //拖拽初始化
      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];//設(shè)置關(guān)鍵css
        }
        $div.onmousedown = function(e){//鼠標(biāo)按鍵按下
          e = e || window.event;
          var x = e.clientX - $div.offsetLeft;//鼠標(biāo)到左上角的距離信息, 固定不變
          var y = e.clientY - $div.offsetTop;
          document.onmousemove = function(e){//鼠標(biāo)移動(dòng)
            e = e || window.event;
            var L = e.clientX - x;
            var T = e.clientY - y;
            var pW = document.documentElement.clientWidth;//頁(yè)面寬度
            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){//鼠標(biāo)按鍵松開(kāi)
            document.onmousemove = null;
          };
        };
      }
    </script>
  </body>
</html>

2、運(yùn)行效果圖如下：