JavaScript 鼠标拖拽
2017-07-03 本文已影响19人
PythonMaO
291121277beda.jpg
Paste_Image.png
代码：
<!DOCTYPE html>
<html>
<head>
<title>鼠标拖拽</title>
<meta charset="utf-8">
<style>
#box{width:200px;height: 200px;background:pink;position:absolute;}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var _box = document.getElementById('box')
_box.onmousedown=function(event){
var _clientX = event.clientX;
var _clientY = event.clientY;
var _boxleft = _box.offsetLeft;
var _boxtop = _box.offsetTop;
var _left = _clientX - _boxleft;
var _top = _clientY - _boxtop;
document.onmousemove=function(event){
var _clientX1 = event.clientX;
var _clientY1 = event.clientY;
var _left1 = _clientX1 - _left;
var _top1 = _clientY1 - _top;
_box.style.left=_left1 + 'px';
_box.style.top=_top1 + 'px';
}
document.onmouseup=function(event){
document.onmousemove=null;
}
}
</script>
</body>
</html>
