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

2019-11-19 17:11:03

字體：大中小

供稿：網(wǎng)友

本文實(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;//頁面寬度            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)按鍵松開            document.onmousemove = null;          };        };      }    </script>  </body></html>

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