<h2>刚开始学H5的js，所以就全用js做的，只是为了锻炼自己的js基础</h2>
<h2>以下就是我整个H5的代码</h2>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.background = 'red';
box.style.position = 'absolute';
document.body.appendChild(box);
//onmounsedown、onmounsemove、onmouseup;
// 这三个事件标识着鼠标拖移的三个状态点，
// 1、鼠标按下 2、鼠标移动 3、鼠标弹起
box.onmousedown = function (event) {
event = event || window.event;
//disX和disY是鼠标在box上点击的位置距离左、上的边距
// var disX = event.clientX - box.offsetLeft;
// var disY = event.clientY - box.offsetTop;
var disX = event.offsetX;
var disY = event.offsetY;
//紧接着触发鼠标移动事件
document.onmousemove = function (event) {
event = event || window.event;
//通过鼠标在可视范围内的横纵坐标，来计算div的left和top值
var left = event.clientX - disX;
var top = event.clientY - disY;
//通过新的left、top值来修改div的位置
box.style.left = left +'px';
box.style.top = top + 'px';
}
//鼠标弹起事件
document.onmouseup = function() {
document.onmousemove = null;//结束移动事件监听
}
}
</script>
</html>
</pre>
H5鼠标拖拽移动
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
- 社交网络日新月异，需要更快，更灵活的技术架构才能满足用户日益丰富的媒体需求，Hybrid App架构具备了快速发布...
