克隆

克隆：
                        obj.cloneNode();//是否深度克隆;true:深度克隆,
                        删除一个属性:obj.removeAttribute('属性名');
                            window.onload=function(){
                                    var oBox=document.getElementById("box");
                                    var oBtn=document.getElementById("btn");
                                    oBtn.onclick=function(){
                                                var oNewDiv=oBox.cloneNode(true);//true为深度克隆(根据oBox克隆)，括号里默认为false
                                                oNewDiv.removeAttribute('id');//移出id属性
                                                document.body.appendChild(oNewDiv);
                                    }
                            }

 

带框拖拽:
                            window.onload=function(){
                                            var oBox=document.getElementById("box");
                                            oBox.onmousedown=function(ev){
                                                            var e=ev||event;
                                                            var disX=e.clientX-oBox.offsetLeft;
                                                            var disY=e.clientY-oBox.offsetTop;
                                                            var oNewDiv=oBox.cloneNode(true); //深度克隆出类似oBox的div
                                                            oNewDiv.removeAttribute('id');//删除新div的id属性
                                                            oNewDiv.className='newDiv';
                                                            oNewDiv.style.width=oBox.offsetWidth+'px';//新div的大小等于oBox的大小
                                                            oNewDiv.style.height=oBox.offsetHeight+'px';
                                                            oNewDiv.style.left=oBox.offsetLeft+'px';//新div的初始位置在oBox的位置
                                                            oNewDiv.style.top=oBox.offsetTop+'px';
                                                            oBox.parentNode.appendChild(oNewDiv);//新div添加到oBox的父级
                                                            document.onmousemove=function(ev){
                                                                            var e=ev||event;
                                                                            var l=e.clientX-disX; //获取新位置
                                                                            var t=e.clientY-disY;
                                                                            oNewDiv.style.left=l+'px';  //新div跟着鼠标走
                                                                            oNewDiv.style.top=t+'px';
                                                            }
                                                           document.onmouseup=function(){
                                                                            document.onmousemove=null;
                                                                            document.onmouseup=null;
                                                                            oBox.style.left=oNewDiv.offsetLeft+'px';  //鼠标抬起后oBox来到新div的位置,同时新div消失
                                                                            oBox.style.top=oNewDiv.offsetTop+'px';
                                                                            oBox.parentNode.removeChild(oNewDiv);
                                                                            oBox.releaseCapture&&oBox.releaseCapture();
                                                            }
                                                          oBox.setCapture&&oBox.setCapture();
                                                          return false;
                                               }
                                                   document.oncontextmenu=function(){
                                                         return false;
                                                   } //阻止右键菜单
                                        }