<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background: orange;
border:10px solid green;
cursor:pointer;
position:absolute;
left:100px;
top:20px;
}
</style>
</head>
<body>
<h1>图层拖拽</h1>
<hr>
<div class="box" id="box"></div>
<script>
//获取box元素
var div = document.getElementById('box');
//给元素绑定 鼠标按键按下事件
div.onmousedown = function(env){
//改变背景色
div.style.backgroundColor = "#999";
//获取event对象
var e = env || window.event;
//求出 鼠标在 div上的位置
var left = e.clientX - div.offsetLeft;
var top = e.clientY - div.offsetTop;
//求窗口的宽高
var w = window.innerWidth;
var h = window.innerHeight;
//绑定鼠标 移动事件
document.onmousemove = function(en){
//获取event对象
var e = en || window.event;
//获取鼠标坐标
var x = e.clientX;
var y = e.clientY;
//设置 div 的位置
div.style.left = Math.min(Math.max(x - left, 0), w - 220) +'px';
div.style.top = Math.min(Math.max(y - top, 0), h - 220)+ 'px';
}
}
//鼠标按键抬起事件
div.onmouseup = function(){
div.style.backgroundColor = "orange";
//解除 onmousemove 事件绑定
document.onmousemove = function(){
}
}
</script>
</body>
</html>
js实例——图层拖拽
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- HTML 学习笔记 May 13，2017 js事件驱动机制、js事件分类、js访问css技术、js事件驱动机制深...
- 思路： 利用onmousedown事件实现拖拽。首先获得鼠标横坐标点和纵坐标点到div的距离，然后当鼠标移动后再用...
