Rumah > Artikel > hujung hadapan web > 如何使用纯JavaScript实现的积木拖动功能的案例
如何使用纯JavaScript实现的积木拖动功能的案例
- 黄舟asal
- 2017-07-20 17:04:511492semak imbas
这篇文章主要介绍了纯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按钮，获取积木,获取积木后可以在浏览器内随意拖动生成的积木:
Atas ialah kandungan terperinci 如何使用纯JavaScript实现的积木拖动功能的案例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：纯JavaScript实现基础表单验证的示例代码Artikel seterusnya：JavaScript小游戏之迷宫小游戏的实例