<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架构具备了快速发布...
