html5移动拖拽,H5鼠标拖拽移动

刚开始学H5的js，所以就全用js做的，只是为了锻炼自己的js基础

以下就是我整个H5的代码

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;//结束移动事件监听

}

}