视图展示
down.png
move.png
up.png
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>moveShape测试</title>
<script type="text/javascript" src="index.js"></script>
</head>
<style>
#div1 {
width: 100px;
height: 100px;
background: #a0a0ef;
position: absolute;
left: 10px;
top: 10px;
}
#vbox {
width: 98px;
height: 98px;
position: absolute;
left: 10px;
top: 10px;
border: 1px dashed black;
display: none;
}
#page-box {
width: 40%;
height: 100%;
border: 1px solid #ccc;
position: absolute;
left: 30%;
right: 30%;
background-color: white !important;
}
</style>
<body>
<div id="page-box">
<!-- 正方形 -->
<div id="div1"></div>
<!-- 正方形框 -->
<div id="vbox"></div>
</div>
</body>
</html>
js
window.onload = function (){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('vbox');
console.log(oDiv1)
// onmousedown事件
oDiv1.onmousedown = function (ev){
drag(this,oDiv2,ev);
return false
}
};
// 拖拽函数
// 这个ev是obj的鼠标事件
function drag(objReal,objVir,ev){
var pos = getPos(ev);
var disX = pos.x - objReal.offsetLeft;
var disY = pos.y - objReal.offsetTop;
objVir.style.display = 'block';
// 这个ev是document的鼠标事件
document.onmousemove = function (ev){
var pos = getPos(ev); // 获取鼠标位置
var l = pos.x - disX; // (l,t)是元素左上角的坐标
var t = pos.y - disY;
// 不让元素移出可视区
if(l<0)
l = 0;
else if(l > document.documentElement.clientWidth - objVir.offsetWidth)
l = document.documentElement.clientWidth - objVir.offsetWidth;
if(t<0)
t = 0;
else if(t > document.documentElement.clientHeight - objVir.offsetHeight)
t = document.documentElement.clientHeight - objVir.offsetHeight;
// 移动虚框
objVir.style.left = l + 'px';
objVir.style.top = t + 'px';
}
// onmouseup事件
document.onmouseup = function (){
document.onmousemove = null; // 停止移动
document.onmouseup = null; // 不需要的函数赋值为null
objVir.style.display = 'none';
// 移动元素
objReal.style.left = objVir.style.left;
objReal.style.top = objVir.style.top;
// 解锁
if(objReal.releaseCapture)
objReal.releaseCapture();
};
// 让所有的事件响应都锁定到obj上
if(objReal.setCapture)
objReal.setCapture();
}
// 获取位置
function getPos(ev){
// 兼容事件,ev是否被定义，如果为false则使用widown.event
var oEvent = ev || widown.event;
// 如果有滑动条的话，要加上滑了的位置,因为oEvent.clientX是可视区的坐标.
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
// 返回一个JSON数组
return {x:oEvent.clientX + scrollLeft,y:oEvent.clientY + scrollTop};
}
扩展理解：
- window.οnlοad=function()是什么意思?
onload是window窗口对象的事件属性，语句是把“匿名函数”赋值给window的onload事件属性,当window加载完成时会触发onload事件，也就触发了“匿名函数”，执行函数体内的语句
2.setCapture()方法？
在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，直到鼠标按钮被释放或者 document.releaseCapture() 被调用
3.releaseCapture()方法？
如果该 document 中的一个元素之上当前启用了鼠标捕获，则释放鼠标捕获。通过调用 element.setCapture() 实现在一个元素上启用鼠标捕获。
4其它。cmd查询去吧~ （不难)
网友评论