javascript_javascript 기술로 완벽한 드래그 앤 드롭을 구현하는 방법-JS 튜토리얼-php.cn

javascript_javascript 기술로 완벽한 드래그 앤 드롭을 구현하는 방법

WBOY

풀어 주다： 2016-05-16 17:21:02

원래의

1021명이 탐색했습니다.

HTML代码:

复代码代码如下:

< ;link rel="stylesheet" href="style.css" />

CSS代码:

复aze代码代码如下:

body, h2 {
    margin:0;
    padding:0;
} 
#login {
    너비:350px;
    높이:250px;
    테두리:1px 실선 #ccc;
    위치:절대;
    왼쪽:512px;
    상단:300px ;
}
#login h2 {
    글꼴 크기:14px;
    text-align:center;
    높이:30px;
    line-height:30px;
    배경 :#f60;
    색상: 흰색;
    커서: 이동;
    margin-bottom:30px;
    letter-spacing:1px;
}
#login .user, #login .pass {
    text-align:center;
    글꼴 크기:12px;
    높이:60px;
    line-height:40px;
}
#login .txt {
    너비:200px;
    테두리:1px 단색 #ccc;
    배경:#fff;
    높이:30px;
    line-height:30px;
}
#login . 제출 {
    text-align:right;
}
#login .button {
    width:100px;
    height:30px;
    background:#06f;
    테두리: none;
    커서:포인터;
    여백:10px 30px;
    색상: 흰색;
    문자 간격:1px;
    글꼴 무게:bold;
}

拖拽核心代码：

复主代码代码如下:

function drag(obj) {
    if (typeof obj === 'string') {
        var obj = document.getElementById(obj);
    } else {
        var obj = obj;
    }
    function fixEvent(event) {
        event.target = event.srcElement;
        event.preventDefault = fixEvent.preventDefault;
        return event;
    }
    fixEvent.preventDefault = function () {
        this.returnValue = false;
    };
    obj.onmousedown = mousedown;
    function mousedown(e) {
        var e = e | | fixEvent(window.event);
        var disX = e.clientX - obj.offsetLeft;
        var disY = e.clientY - obj.offsetTop;
        if (e.target.tagName === 'H2 ') {
            document.onmousemove = move;
            document.onmouseup = up;
        } else {
            document.onmousemove = null;
            document.onmouseup = 널;            
        }
        함수 이동(e) {
            var e = e || fixEvent(window.event);
            var left = e.clientX - disX;
            var top = e.clientY - disY;
            if (obj.setCapture) {
              (); 
           }
            if (왼쪽 < 0) {
               왼쪽 = 0;
           } else if (왼쪽 > document.documentElement.clientWidth - obj.offsetWidth) {
                왼쪽 = 문서. documentElement.clientWidth - obj.offsetWidth;
            }
            if (top < 0) {
               top = 0;
           } else if (top > ement.clientHeight - obj.offsetHeight) {
               top = document.documentElement.clientHeight - obj.offsetHeight;
           }
           obj.style.left = 왼쪽 'px';
            obj.style.top = top 'px';
            false 반환;
        };
        function up() {
            if (obj.releaseCapture) {
             }
            document.onmousemove = null;
            document.onmouseup = null;
        }
    };
}

调用代码：

复代码码代码如下:

window.onload = function () {
    var login = document.getElementById('login');
    drag(login );
};

欢迎批评指正！！

javascript_javascript 기술로 완벽한 드래그 앤 드롭을 구현하는 방법

网站登录