效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="rec" style="position:absolute;left: 100px;top: 100px; width: 50px;height: 50px;background: red;"></div>
</body>
<script type="text/javascript">
//获取div元素
var rec = document.getElementById("rec")
var down = false;
var dx = 0;
var dy = 0;
var sx = 0;
var sy = 0;
document.onmousemove = function(e){
if (down) {
var ev = e || event;
console.log(ev.clientY)
rec.style.top = ev.clientY - (dy - sy) + 'px';
rec.style.left = ev.clientX - (dx - sx) + 'px';
}
}
rec.onmousedown = function(){
dx = event.clientX;
dy = event.clientY;
sx = parseInt(rec.style.left);
sy = parseInt(rec.style.top);
if (!down) {
down = true;
}
}
document.onmouseup = function(){
if (down) {
down = false;
}
}
</script>
<script>
</html>
这里写代码片
在上面的代码中我们需要注意下面几个地方：
1.事件兼容
在ie中我们通过window.event对象就能获取到事件对象，而在火狐中，事件对象是通过函数的参数传递过来的，所以在此我们要进行一个判断，clientX指的是鼠标在当前浏览器窗口中的位置。
2.clientX返回的是一个数字，我们需要拼接px，才能出现效果。
3.需要给div指定定位方式，使其脱离文档流，才能起到移动的效果
完成了上面的功能之后，我们来实现一下点击动态创建div，然后移动
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one{
position: absolute;
}
</style>
</head>
<body>
<input type="button" id="btn" value="add" />
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var down = false;
var dx = 0;
var dy = 0;
var sx = 0;
var sy = 0;
var d= null;
btn.onclick = function() {
if (d != null) {
return;
}
d = document.createElement('div');
//d.style.left要带px
d.style.left = "100px";
d.style.top = "40px";
d.style.background = "green";
d.style.width = "100px";
d.style.height = "30px"
d.className = "one";
document.body.appendChild(d)
//此处的onmousedown事件要放在click函数中，否则会报错
d.onmousedown = function(){
dx = event.clientX;
dy = event.clientY;
sx = parseInt(d.style.left);
sy = parseInt(d.style.top);
if (!down) {
down = true;
}
}
}
document.onmousemove = function(e){
if (down) {
var ev = e || event;
d.style.top = ev.clientY - (dy - sy) + 'px';
d.style.left = ev.clientX - (dx - sx) + 'px';
}
}
document.onmouseup = function(){
if (down) {
down = false;
}
}
</script>
</html>
