霍董董上机demo

js上机练习

目录

[JS课程合集跳转链接][1]

div拖拽的三种方法

offsetX与clientX

window.onload = function() {
var oDiv = document.getElementById('divID');
oDiv.onmousedown = function(event) {
    var oX = event.offsetX;
    var oY = event.offsetY;
    document.onmousemove = function(e) {
        var e = e || window.event; // 对IE的兼容性问题的一种解决方式
        var X = e.clientX;
        var Y = e.clientY;
        oDiv.style.left = (X - oX) + "px";
        oDiv.style.top = (Y - oY) + "px";
    };
    document.onmouseup = function() {
        this.onmousemove = null;
    };
};
};

pageX与offsetLeft

window.onload = function() {
    var oDiv = document.getElementById('divID');
    oDiv.onmousedown = function(event) {
        // 最后一个bug
        var left = oDiv.offsetLeft;
        var top = oDiv.offsetTop;
        // 最后一个bug
        var oX = event.pageX;
        var oY = event.pageY;
        document.onmousemove = function(e) {
            var e = e || window.event; // 对IE的兼容性问题的一种解决方式
            var X = e.pageX;
            var Y = e.pageY;
            oDiv.style.left = (X - oX) + left + "px";
            oDiv.style.top = (Y - oY) + top + "px";
        };
        document.onmouseup = function() {
            this.onmousemove = null;
        };
    };
};

jQ方法