【Javascript】入门之元素拖拽

描述: 实现元素拖拽功能

代码实现:

// 拖拽元素函数
function drag(ele) {
    // ele: 元素
    // 按下div
    ele.onmousedown = function (evs) {
        // 按下的时候 求鼠标距离元素左侧的距离  鼠标当前距离页面左侧 - 元素到页面左侧的距
        var ev = window.event || evs;
        var ml = ev.clientX - ele.offsetLeft;
        console.log(ml);
        // 鼠标距离元素上方的距离
        var mt = ev.clientY - ele.offsetTop;
        // 鼠标在全页面中移动  ele都要跟随移动
        document.onmousemove = function (evs) {
            // 求当前鼠标的位置
            var ev = window.event || evs;
            console.log(ev.clientX);
            var L = ev.clientX - ml;
            var T = ev.clientY - mt;
            // 判断边界值
            if (T <= 0) {
                T = 0;
            }
            if (L <= 0) {
                L = 0;
            }
            if (L >= document.documentElement.clientWidth - ele.offsetWidth) {
                L = document.documentElement.clientWidth - ele.offsetWidth;
            }
            if (T >= document.documentElement.clientHeight - ele.offsetHeight) {
                T = document.documentElement.clientHeight - ele.offsetHeight;
            }
            // 赋值给元素的left   l1 - l2   l1: 鼠标到屏幕左侧的距离  l2: 鼠标到元素左侧的距离
            ele.style.left = L + 'px';
            ele.style.top = T + 'px';

        }
        // 如果是ie8  所有的事件都优先给ele
        if (ele.setCapture) {
            ele.setCapture();
        }
        // 阻止默认事件
        return false;
    }
    // 鼠标在任何位置抬起 清除事件
    document.onmouseup = function () {
        document.onmousemove = null;
        // 鼠标抬起之后 需要释放全局捕获
        if (ele.releaseCapture) {
            ele.releaseCapture();
        }
    }
}