您的位置：首页 > Web前端 > JavaScript

纯js实现的积木(div层)拖动功能示例

2017-07-19 10:19 731 查看

本文实例讲述了纯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 拖动

相关文章推荐

新的分享

章节导航