javascript--드래그 원리 작은 실례

CSS 코드:

#div1{ width: 100px; height: 100px; background: green; position: absolute;}

HTML 코드:

<div id="div1">div>

JS 코드:

/*
        onmousedown :     
        onmousemove :     
        onmouseup     :     
    */
    window.onload = function(){

        var oDiv = document.getElementById('div1');

        //     
        oDiv.onmousedown = function(ev){

            var ev = ev || event;

            //             
            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop ;

            //     
            document.onmousemove = function(ev){

                var ev = ev || event;

                oDiv.style.left = ev.clientX - disX + 'px';
                oDiv.style.top = ev.clientY - disY + 'px';
            };
            //     
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
            }
        };

    };

 　JS-demo2:

window.onload = function(){
        /*
            1.     ，        ，     
              ：        ，           ，                 
              ：
                  ：      
                   ie：    
        */
        var oDiv = document.getElementById('div1');

        oDiv.onmousedown = function(ev){

            var ev = ev || event;

            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;

            if(oDiv.setCapture){
                oDiv.setCapture();
            }

            document.onmousemove = function(ev){

                var ev = ev || event;

                oDiv.style.left = ev.clientX - disX + 'px';
                oDiv.style.top = ev.clientY - disY + 'px';
            };

            document.onmouseup = function(){

                document.onmousemove = document.onmouseup = null;

                if(oDiv.releaseCapture){
                    oDiv.releaseCapture();
                }
                return false;
            };

        };

    };

 
전재 대상:https://www.cnblogs.com/bokebi520/p/4360348.html