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

JS盒子的拖动

2019-05-30 22:50 204 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽--Clone</title>
<style type="text/css">
body,div{margin:0;padding:0;}
body{background:#3e3e3e;}
div{position:absolute;width:100px;height:100px;cursor:move;border:1px solid #888;background:#000;}
#drag1{top:100px;left:100px;}
#drag2{top:100px;left:300px;}
#temp{opacity:0.3;filter:alpha(opacity=30);}
</style>
<script src="common.js"></script>
</head>
<body>
<div id="drag1"></div>
<div id="drag2"></div>
</body>
<script>
//定义层级
var zIndex =1;
window.onload = function () {
//获取页面元素
var box1 = my$("drag1");
var box2 = my$("drag2");
//调用
getNew(box1);
getNew(box2);
//封装方法
};
function getNew(box)
{
//鼠标按下获取距离值
box.onmousedown = function (e) {
var left = e.clientX - this.offsetLeft;
var top = e.clientY - this.offsetTop;
//并创建一个新的DIV,添加id,
var newDiv = document.createElement("div");
newDiv["id"] = "temp";
//将鼠标按下获取到的距离值通过getConputedStyle.属性的方法赋值给新div
newDiv.style.left = getComputedStyle(box, null).left;
newDiv.style.top =  getComputedStyle(box, null).top;
newDiv.style.zIndex = zIndex++;
document.body.appendChild(newDiv);
document.onmousemove = function (e) {
//鼠标移动时获取偏移量
var newLeft = e.clientX -left;
var newTop = e.clientY -top;
//允许移动的最大值
var maxLeft = document.documentElement.clientWidth - box.offsetWidth;
var maxTop = document.documentElement.clientHeight - box.offsetHeight;
//最小值
newLeft = newLeft<0?0:newLeft;
newTop = newTop<0?0:newTop;
//最大值
newLeft = newLeft>maxLeft?maxLeft:newLeft;
newTop = newTop>maxTop?top:newTop;
//赋值
newDiv.style.left = newLeft + "px";
newDiv.style.top = newTop + "px";
return false;
}
//鼠标松开时将新盒子的左右偏移量赋值给原先的盒子,并去除新盒子
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
box.style.left = newDiv.style.left;
box.style.top = newDiv.style.top;
box.style.zIndex = newDiv.style.zIndex;
document.body.removeChild(newDiv);
}
return false
}
}
</script>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: