纯js实现的积木(div层)拖动功能示例
程序员文章站
2022-05-26 08:24:01
本文实例讲述了纯js实现的积木(div层)拖动功能。分享给大家供大家参考，具体如下：
本文实例讲述了纯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按钮，获取积木,获取积木后可以在浏览器内随意拖动生成的积木:
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript数据结构与算法技巧总结》、《javascript数学运算用法总结》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》及《javascript遍历算法与技巧总结》
希望本文所述对大家javascript程序设计有所帮助。
下一篇： js 事件的传播机制(实例讲解)