JS实现让div自由拖拽

JS实现让div自由拖拽

/**
 * div拖动
 * @param {id} html元素id
 * 调用方式 dragFunc('你的元素id')
 */
function dragFunc(id) {
    
    
    var Drag = document.getElementById(id);
    Drag.onmousedown = function(event) {
    
    
        var ev = event || window.event;
        event.stopPropagation();
        var disX = ev.clientX - Drag.offsetLeft;
        var disY = ev.clientY - Drag.offsetTop;
        document.onmousemove = function(event) {
    
    
            var ev = event || window.event;
            Drag.style.left = ev.clientX - disX + "px";
            Drag.style.top = ev.clientY - disY + "px";
            Drag.style.cursor = "move";
        };
    };
    Drag.onmouseup = function() {
    
    
        document.onmousemove = null;
        this.style.cursor = "default";
    };
};

猜你喜欢

转载自blog.csdn.net/qq_42107364/article/details/110087281