首页 JavaScript源码正文

JS带框拖拽案例解析

xianstudy 源码 2015-03-23 757 0 拖拽

css:

<style>
div { position:absolute; top:100px; left:100px; }
#div1 { width:200px; height:200px; background:#ccc; }
.box { width:198px; height:198px; border:1px dashed #000; }
</style>

JS

window.onload=function (){
    var oDiv=document.getElementById('div1');
    
    oDiv.onmousedown=function (ev){
        var oEvent=ev || event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        var oDiv2=document.createElement('div');
        oDiv2.className='box';
        oDiv2.style.left=oDiv.offsetLeft+'px';
        oDiv2.style.top=oDiv.offsetTop+'px';
        document.body.appendChild(oDiv2);
        
        document.onmousemove=function (ev){
            var oEvent=ev || event;
            var left=oEvent.clientX-disX;
            var top=oEvent.clientY-disY;
            
            oDiv2.style.left=left+'px';
            oDiv2.style.top=top+'px';
        };
        
        document.onmouseup=function (){
            document.onmousemove=null;
            document.onmouseup=null;
            
            oDiv.style.left=oDiv2.offsetLeft+'px';
            oDiv.style.top=oDiv2.offsetTop+'px';
            
            document.body.removeChild(oDiv2);
            oDiv.releaseCapture && oDiv.releaseCapture();
        };
        
        oDiv.setCapture && oDiv.setCapture();
        return false;
    };
};

html

<div id="div1"></div>


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论