克隆:
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;
} //阻止右键菜单
}