如何使用纯JavaScript实现的积木拖动功能的案例
程序员文章站
2022-04-24 15:13:27
...
这篇文章主要介绍了纯js实现的积木(p层)拖动功能,结合实例形式分析了javascript随机生成各种颜色p层及响应鼠标事件改变元素属性实现拖动效果的相关操作技巧,需要的朋友可以参考下
本文实例讲述了纯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实现的积木拖动功能的案例的详细内容,更多请关注其它相关文章!
上一篇: jQuery之常用的选择器分享