js 鼠标拖拽事件

第一步：获取元素，绑定按下事件

var red = document.getElementById('red'); //获取红色泡var mouseOffsetX = 0, mouseOffsetY = 0; //初始定义偏移值var isDrag = false;         //是否可拖动red.addEventListener('mousedown', function (e) {//鼠标按下    var e = e || window.event;    mouseOffsetX = e.pageX - red.offsetLeft; //鼠标指针位置减去元素的左边距    mouseOffsetY = e.pageY - red.offsetTop;    isDrag = true;});

第二步：鼠标移动

//鼠标移动document.onmousemove = function (e) {//鼠标移动e    var e = e || window.event;    var mouseX = e.pageX;    var mouseY = e.pageY;    var moveX = 0, moveY = 0;    if (isDrag === true) {        moveX = mouseX - mouseOffsetX; //移动的距离等于鼠标指针减去上面获取的差值        moveY = mouseY - mouseOffsetY;        //限定移动范围        var PW = document.documentElement.clientWidth;//窗口的宽高        var PH = document.documentElement.clientHeight;        var redW = red.offsetWidth; //元素红色泡泡的自身的宽高        var redH = red.offsetHeight;        var maxX = PW - redW; //最大的宽度为窗口可视区宽减去自身的宽        var maxY = PH - redH;        moveX = Math.min(maxX, Math.max(0, moveX));// 取值范围        moveY = Math.min(maxY, Math.max(0, moveY));        red.style.left = moveX + 'px';        red.style.top = moveY + 'px';

第三步：鼠标移开，将可被拖拽设置为false即可

//鼠标松开document.onmouseup = function () {    isDrag = false;};