detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
该方法会保留移除元素的副本，允许它们在以后被重新插入。
提示：如需移除元素及它的数据和事件，请使用 remove() 方法代替。
提示：如只需从被选元素移除内容，请使用 empty() 方法。
案例：
页面第一次加载，点击“直线、圆形”等，不会报错，如下：
图1
当点击“复制、粘贴”时，出现报错，并且再次点击“直线、圆形”无效，如下：
错误方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
body,
html {
margin: 0;
width: 100%;
}
#container {
width: 1920px;
background: #aaa;
padding: 20px;
}
.box {
width: 1820px;
height: 630px;
border: 1px solid black;
background: #ccc;
margin: 20px auto;
padding: 20px;
}
h1 {
font-size: 20px;
margin-top: 0 auto;
}
.box h2 {
font-size: 18px;
}
.box code {
display: block;
font-size: 16px;
white-space: pre;
}
.box .svgBox {
width: 820px;
height: 600px;
margin: 20px 0 0;
border: 1px solid black;
background: #fff;
border-radius: 10px;
}
.copy {
position: absolute;
width: 820px;
height: 600px;
}
.xp {
width: 10px;
height: 10px;
border: 1px solid #000;
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
<script src="https://wow.techbrood.com/libs/jquery/jquery-2.1.1.min.js"></script>
<!-- svg 选择样式 -->
<link rel="stylesheet" type="text/css" media="screen" href="https://svgjs.com/svg.select.js/demo/svg.select.css">
</head>
<body>
<div id="container">
<h1>test</h1>
<div class="box" >
<div class="svgBox" style="float: left">
<div id="svgBox">
<svg id="svg">
<g id="svgPanel">
</g>
</svg>
</div>
</div>
<div class="svgBox" style="float: left;margin-left: 80px">
<canvas id="canvas" style="height: 600px;width: 820px;background:#ffffff"></canvas>
</div>
</div>
<div style="clear: both">
<button id="line">直线</button>
<button id="arc">圆形</button>
<button id="rect">矩形</button>
<button id="text">文本</button>
<button id="add" style="width: 70px">
<input type="file" id="svg_img" style="opacity: 0;position: absolute;width: 60px;"> 上传图片
</button>
<button id="copy"> 复制 </button>
<button id="paste"> 粘贴 </button>
</div>
</div>
</body>
<script src="https://svgjs.com/svg.select.js/demo/svg.min.js"></script>
<script src="http://demo.htmleaf.com/1501/201501311541/js/svg.draggable.js"></script> <!--拖拽-->
<script src="https://svgjs.com/svg.select.js/demo/svg.select.min.js"></script> <!-- 选中 -->
<script src="https://svgjs.com/svg.resize.js/demo/svg.resize.js"></script> <!-- 放大缩小 -->
<script type="text/javascript">
var svg = document.getElementById('svg');
var svgPanel = document.getElementById('svgPanel');
var width = 820; // 设置svg整体的宽和高
var height = 600;
var draw = new SVG("svgPanel").size("100%", "100%");
svg.setAttribute('width', width);
svg.setAttribute('height', height);
var _html;
//复制
$('#copy').click(function () {
_html = $('#SvgjsSvg1000').html();
$('#SvgjsSvg1000').html('');
})
//粘贴
$('#paste').click(function () {
$('#SvgjsSvg1000').html(_html);
})
//直线
$('#line').click(function () {
draw.line(10, 10, 80, 150).stroke({ width: 5, linecap: "round", color: "black" }).draggable();
})
//圆形
$('#arc').click(function () {
draw.ellipse(150, 150) // 宽直径，高直径
.move(240, 20)
.stroke({color: "black"})
.fill("white").draggable().select({deepSelect:true}).resize();
})
</script>
</html>
图2
解决方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
body,
html {
margin: 0;
width: 100%;
}
#container {
width: 1920px;
background: #aaa;
padding: 20px;
}
.box {
width: 1820px;
height: 630px;
border: 1px solid black;
background: #ccc;
margin: 20px auto;
padding: 20px;
}
h1 {
font-size: 20px;
margin-top: 0 auto;
}
.box h2 {
font-size: 18px;
}
.box code {
display: block;
font-size: 16px;
white-space: pre;
}
.box .svgBox {
width: 820px;
height: 600px;
margin: 20px 0 0;
border: 1px solid black;
background: #fff;
border-radius: 10px;
}
.copy {
position: absolute;
width: 820px;
height: 600px;
}
.xp {
width: 10px;
height: 10px;
border: 1px solid #000;
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
<script src="https://wow.techbrood.com/libs/jquery/jquery-2.1.1.min.js"></script>
<!-- svg 选择样式 -->
<link rel="stylesheet" type="text/css" media="screen" href="https://svgjs.com/svg.select.js/demo/svg.select.css">
</head>
<body>
<div id="container">
<h1>test</h1>
<div class="box" >
<div class="svgBox" style="float: left">
<div id="svgBox">
<svg id="svg">
<g id="svgPanel">
</g>
</svg>
</div>
</div>
<div class="svgBox" style="float: left;margin-left: 80px">
<canvas id="canvas" style="height: 600px;width: 820px;background:#ffffff"></canvas>
</div>
</div>
<div style="clear: both">
<button id="line">直线</button>
<button id="arc">圆形</button>
<button id="rect">矩形</button>
<button id="text">文本</button>
<button id="add" style="width: 70px">
<input type="file" id="svg_img" style="opacity: 0;position: absolute;width: 60px;"> 上传图片
</button>
<button id="copy"> 复制 </button>
<button id="paste"> 粘贴 </button>
</div>
</div>
</body>
<script src="https://svgjs.com/svg.select.js/demo/svg.min.js"></script>
<script src="http://demo.htmleaf.com/1501/201501311541/js/svg.draggable.js"></script> <!--拖拽-->
<script src="https://svgjs.com/svg.select.js/demo/svg.select.min.js"></script> <!-- 选中 -->
<script src="https://svgjs.com/svg.resize.js/demo/svg.resize.js"></script> <!-- 放大缩小 -->
<script type="text/javascript">
var svg = document.getElementById('svg');
var svgPanel = document.getElementById('svgPanel');
var width = 820; // 设置svg整体的宽和高
var height = 600;
var draw = new SVG("svgPanel").size("100%", "100%");
svg.setAttribute('width', width);
svg.setAttribute('height', height);
var _html;
//复制
$('#copy').click(function () {
_html = $('#svg').detach()；
})
//粘贴
$('#paste').click(function () {
$('#svgBox').append(_html);
})
//直线
$('#line').click(function () {
draw.line(10, 10, 80, 150).stroke({ width: 5, linecap: "round", color: "black" }).draggable();
})
//圆形
$('#arc').click(function () {
draw.ellipse(150, 150) // 宽直径，高直径
.move(240, 20)
.stroke({color: "black"})
.fill("white").draggable().select({deepSelect:true}).resize();
})
//文本
$('#text').click(function () {
draw.plain('文本').center(240, 20).draggable();
})
//矩形
$('#rect').click(function () {
rect = draw.rect(600, 200).move(50,50).attr('stroke-width',1).attr('fill','none').attr('fill', 'white').draggable();
})
</script>
</html>
网友评论