这篇文章主要介绍了纯js实现的积木(div层)拖动功能,结合实例形式分析了javascript随机生成各种颜色div层及响应鼠标事件改变元素属性实现拖动效果的相关操作技巧,需要的朋友可以参考下
本文实例讲述了纯js实现的积木(div层)拖动功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖动</title> <style type="text/css"> </style> </head> <body> <input type="button" value="获取积木"/> </body> <script> //生成积木 document.getElementById("div3").onclick=function(){ var num = getnumber(); var num1 = getnumber(); var num2 = getnumber(); var num3 = getnumber(); var divs = '<divstyle="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按钮，获取积木,获取积木后可以在浏览器内随意拖动生成的积木:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章: