<style>
#box {
width: 50px;
height: 50px;
background-color: #e74c3c;
position: absolute;
}
</style>
</head>
<body>
<!-- 定义一个盒子 -->
<div id="box"></div>
<script>
/* 获取box的节点元素 */
var box = document.getElementById('box')
/* 获取父盒子 */
var plus_box = document.getElementById('plus_box');
/* 定义一个变量 */
var flag = false;
/* 定义两个值，保存鼠标按下时初始值 */
var p_left = 0,
p_top = 0;
/* 绑定鼠标按下 */
box.onmousedown = function(e) {
flag = true
/* 定义两个值，保存鼠标按下时位置 */
p_left = e.offsetX;
p_top = e.offsetY;
}
/* 鼠标抬起 */
box.onmouseup = function() {
flag = false
}
/* var pl = plus_box.offsetLeft
var pt = plus_box.offsetTop */
/* 鼠标移动 */
document.onmousemove = function(e) {
if (!flag) {
return;
}
/* 求坐标点 */
var x = e.pageX - p_left;
var y = e.pageY - p_top;
/* 将坐标赋值给盒子 */
box.style.left = x + 'px';
box.style.top = y + 'px';
}
</script>
</body>
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
