21,拖拽带框（练）

拖拽带框：先在鼠标点击的div位置创建并拖出一个div框，当鼠标抬起时，div跑到div框所在的位置，鼠标抬起删除div框；

var oDiv2=document.createElement('div');//创建div框；

oDiv2.className='div2';//给div框添加class;

document.body.appendChild(oDiv2);//添加到父元素；

document.body.removeChild(oDiv2);//删除div框；

<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
        
        var oBox=document.createElement('div');
        
        oBox.className='box';
        oBox.style.width=oDiv.offsetWidth-2+'px';
        oBox.style.height=oDiv.offsetHeight-2+'px';
        
        oBox.style.left=oDiv.offsetLeft+'px';
        oBox.style.top=oDiv.offsetTop+'px';
        
        document.body.appendChild(oBox);
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;
            
            oBox.style.left=l+'px';
            oBox.style.top=t+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
            
            oDiv.style.left=oBox.offsetLeft+'px';
            oDiv.style.top=oBox.offsetTop+'px';
            
            document.body.removeChild(oBox);
        };
        
        return false;    //chrome、ff、IE9
    };
};
</script>

 css:

<style>
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
.box {border:1px dashed black; position:absolute;}
</style>