純js實現的積木(div層)拖動功能示例

2019-11-19 16:02:38

字體：大中小

來源：轉載

供稿：網友

本文實例講述了純js實現的積木(div層)拖動功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>拖動</title>  <style type="text/css">  </style></head><body id="content"><input type="button" value="獲取積木" id="div3"/></body><script>  //生成積木  document.getElementById("div3").onclick=function(){    var num = getnumber();    var num1 = getnumber();    var num2 = getnumber();    var num3 = getnumber();    var divs = '<div id="s'+num+'"style="width: 200px;height: 200px;position: absolute;background:rgb('+num1+','+num2+','+num3+')"></div>'    document.getElementById("content").insertAdjacentHTML("beforeEnd",divs);    darg1("s"+num+"");  };  //h獲取隨機數，獲取隨機顏色  function getnumber(){    return parseInt(Math.random()*255);  }  //拖動積木  function darg1(id){    var obj = document.getElementById(id);    var objx = 0;    var objy = 0;    obj.onmousedown = function(even){      //鼠標到div的距離      objx = even.clientX - obj.offsetLeft;      objy = even.clientY - obj.offsetTop;      //div移動的距離 = 鼠標到父窗口的距離 - 鼠標到div的距離      document.onmousemove = function(even){        obj.style.left = even.pageX-objx+'px';        obj.style.top = even.pageY-objy+'px';      };      document.onmouseup = function(){        document.onmousemove = null;        document.onmouseup = null;      };    };    return false;  }</script><html>

點擊button按鈕，獲取積木,獲取積木后可以在瀏覽器內隨意拖動生成的積木: