Html模拟鼠标移动,原生js及H5模拟鼠标点击拖拽

一.原生js

1、拖拽的流程动作

鼠标按下 触发onmousedown事件

鼠标移动 触发onmousemove事件

鼠标松开 触发onmouseup事件

2、注意事项：

要防止div移出可视框，要限制div移动的横纵坐标；

防止火狐的bug, 要在最后写上return false，阻止默认事件；

防止鼠标运动时移出div，所以要用document.onmousemove和document.onmouseup，不能用oDiv.onmousemove;

3、代码实现：

html：

可拖动div元素

js：

window.onload = function() {

var box = document.getElementById('box')

box.onmousedown = function(e) { //首先要获取鼠标相对于元素的位置

var disX = e.clientX - box.offsetLeft //clientX,Y鼠标相对于浏览器窗口可视区域的X，Y坐标(窗口坐标)

var disY = e.clientY - box.offsetTop //offsetLeft,top是元素相对父元素的偏移宽度

document.onmousemove = function(e) {

var l = e.clientX - disX

var t