本文实例讲述了纯js实现的积木(p层)拖动功能。分享给大家供大家参考，具体如下：
<!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="p3"/> </body> <script> //生成积木 document.getelementbyid("p3").onclick=function(){ var num = getnumber(); var num1 = getnumber(); var num2 = getnumber(); var num3 = getnumber(); var ps = '<p id="s'+num+'"style="width: 200px;height: 200px;position: absolute;background:rgb('+num1+','+num2+','+num3+')"></p>' document.getelementbyid("content").insertadjacenthtml("beforeend",ps); 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){ //鼠标到p的距离 objx = even.clientx - obj.offsetleft; objy = even.clienty - obj.offsettop; //p移动的距离 = 鼠标到父窗口的距离 - 鼠标到p的距离 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按钮，获取积木,获取积木后可以在浏览器内随意拖动生成的积木:
以上就是如何使用纯javascript实现的积木拖动功能的案例的详细内容。