svg实现多个元素拖拽
2024-05-16 05:28:13
下面使用到的index.css
path{stroke:black;stroke-width:3;fill:none;stroke-linecap: round;
}
svg {}
p{text-align: center;font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";font-weight: bold;
}
span{text-align: center;
}
#attr_select{display: flex;text-align: center;margin:0px auto;height:27px;text-align-last: center;font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";font-weight: bold;
}
svg.select.css
.svg_select_points_lt{cursor: nw-resize;
}
.svg_select_points_rt{cursor: ne-resize;
}
.svg_select_points_rb{cursor: se-resize;
}
.svg_select_points_lb{cursor: sw-resize;
}
.svg_select_points_t{cursor: n-resize;
}
.svg_select_points_r{cursor: e-resize;
}
.svg_select_points_b{cursor: s-resize;
}
.svg_select_points_l{cursor: w-resize;
}.svg_select_points_rot{stroke-width:1;stroke:black;fill: #F9FFED;
}.svg_select_points_point{cursor: move;
}.svg_select_boundingRect{stroke-width:1;fill:gray;stroke-dasharray:10 10;stroke:black;stroke-opacity:0.8;fill-opacity:0.1;pointer-events:none; /* This ons is needed if you want to deselect or drag the shape*/
}
普通版 使用inputrange左右平移及中心缩放
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><title>自动报警系统</title><style>#show1{}.close:hover{color: darkred;}.inputk{text-decoration:none;border: solid 1px #AC8F73;height: 21px;}.button{background-color:#E7D9CB;color:#AC8F73;text-align:center;text-decoration:none;display:inline-block;cursor: pointer;border: solid 1px #AC8F73;font-weight: bold;font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";}</style><script src="../../../static/js/jquery.js"></script><script src="../../../static/js/echarts.js"></script><script src="../../../static/js/echarts_demo.js"></script><script src="../../../static/js/java_index.js"></script><script src="../../../static/js/plain-draggable.min.js"></script><script src="../../../static/js/svg.min.js"></script><script src="../../../static/js/svg.draggable.min.js"></script><link rel="stylesheet" href="../../../static/css/index.css">
</head>
<body style="background-color:#E7D9CB "><!--写名字-->
<div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink";style="width: 200px;height: 100px;margin-top: 0px;margin-left: 0px;position: absolute"><path d="M 50 30 L 53 38 M 35 38 L 71 38 M 35 38 L 34 70 L 33 88 L 32 91M 44 49 L 65 49 L 65 63 L 44 63 M 44 56 L 70 56 M 54 45 L 54 63M 45 74 L 63 74 L 63 84 L 45 84 Z"/><path d="M 100 32 L 99 50 L 98 60 L 97 71 L 110 90 M 94 40 L 120 40 M 112 40 L 110 56 L 109 68 L 103 90M 150 32 L 128 34 L 124 35 M 125 40 L 128 46 M 134 40 L 137 46 M 147 40 L 144 46M 125 51 L 146 51 M 122 61 L 149 61 M 132 51 L 130 65 L 124 90 M 130 70 L 144 70 L 142 80 L 134 90M 130 70 L 135 80 L 150 90 "/></svg>
</div>
<!-- 弹出框 -->
<div id="show1" style=" position: absolute;width: 380px;height: 278px;margin-left:180px;margin-top:40px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show1').style.display='none'" >x</span></div><div id="show_e1" style="width: 380px;height: 280px"></div>
</div>
<div id="show2" style=" position: absolute;width: 380px;height: 278px;display: none;margin-left:176px;margin-top:390px;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show2').style.display='none'" >x</span></div><div id="show_e2" style="width: 380px;height: 280px"></div>
</div>
<div id="show3" style=" position: absolute;width: 380px;height: 278px;margin-left:1104px;margin-top: 280px; display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show3').style.display='none'" >x</span></div><div id="show_e3" style="width: 380px;height: 280px"></div>
</div>
<div id="show4" style=" position: absolute;width: 380px;height: 278px;margin-left:710px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show4').style.display='none'" >x</span></div><div id="show_e4" style="width: 380px;height: 280px"></div>
</div>
<div id="show5" style=" position: absolute;width: 380px;height: 278px;margin-left:736px;margin-top:404px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show5').style.display='none'" >x</span></div><div id="show_e5" style="width: 380px;height: 280px"></div>
</div>
<!--左边的输入框-->
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 140px;position: absolute;left:58px;top:145px"><form style="text-align: center"><p style="margin-top: 16px;color:#AC8F73">请输入要增加 / 删除的参数名</p><input type="text" name="extra" class ="inputk" id="extra_cs" style="margin-top: 14px;background: #E7D9CB;background-color:transparent;padding-left: 10px" ><div style="width: 240px"><input type="button" class ="button"value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_option()"><input type="button"class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_option()"></div></form>
</div>
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 188px;position: absolute;left:58px;top:310px"><form style="text-align: center"><p style="margin-top: 24px;color:#AC8F73">请输入要增加/删除的数据</p><!-- <label style="font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;margin-left: 10px; margin-right: 10px">温度</label>--><select id="attr_select" style="color:#AC8F73;background-color:transparent"><option id="0" value="-请选择-">-请选择-</option><option id="1" value="温度">温度</option><option id="2" value="湿度">湿度</option></select><input type="text" class ="inputk" name="shuju" id="shuju" style="margin-top: 20px;background-color:transparent;padding-left: 10px" ><div style="width: 240px"><input type="button" class ="button" value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_panduan()"><input type="button" class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_panduan()"></div></form>
</div><svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg"><script xlink:href="SVGPan.js"/><g id="wholezoom" style="transform-origin: 0 0;position: absolute"><image x="-1" y="-1" width="960" height="596" xlink:href="../../../static/images/eerduosi2.jpg" id="picture" /><circle id="c1" cx="240" cy="200" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)' /><circle id="c2" cx="230" cy="390" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/><circle id="c3" cx="780" cy="196" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/><circle id="c4" cx="340" cy="110" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/><circle id="c5" cx="492" cy="320" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/></g>
</svg>
<div style="position: absolute"><form id="zoom_num" style="margin-top: 10px;margin-left: 510px;"><label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">缩放</label><input id="zoom" type="range" value="1" min="0" step="0.01" max="2" style=""/><label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">平移x</label><input id="movex" type="range" value="1" min="-1000" step="6" max="1000" /><label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">平移y</label><input id="movey" type="range" value="1" min="-1000" step="6" max="1000" /></form>
</div></body><script type="text/javascript">var SVG_NS = 'http://www.w3.org/2000/svg';var wholepanel = document.getElementById("wholezoom");var zoom_num = document.getElementById("zoom_num");var i=3; //全局变量，id值不断增大//echarts初始折线图function bld_echarts(id) {var gid=id.toString();var sid;if(gid==("c1")){var myChart = echarts.init(document.getElementById("show_e1"));sid=document.getElementById("show1");}else if(gid==("c2")){var myChart = echarts.init(document.getElementById("show_e2"));sid=document.getElementById("show2");}else if(gid==("c3")){var myChart = echarts.init(document.getElementById("show_e3"));sid=document.getElementById("show3");}else if(gid==("c4")){var myChart = echarts.init(document.getElementById("show_e4"));sid=document.getElementById("show4");}else if(gid==("c5")){var myChart = echarts.init(document.getElementById("show_e5"));sid=document.getElementById("show5");} else alert("弹出错误");if(sid.style.display=="none"){// $("#show1").css("width",wid);// $("#show1").css("height",hei);sid.style.display="block";//显示div}else if(show1.style.display=="block"){sid.style.display="none";//隐藏div}$.ajax({url: "/ech_data",data:{id:gid,},dataType: "json",//数据格式type: "post",//请求方式async: false,//是否异步请求success: function (data) { //如果请求成功，返回数据。alert(JSON.stringify(data.data1));alert(JSON.stringify(data.x_data));myChart.setOption({title: {text: data.title,},tooltip: {trigger: 'axis'},legend:{data: ['温度', '湿度','风力']// data: ['一级保护区', '二级保护区','准保护区']},xAxis: {type: 'category',data: data.x_data,boundaryGap:true,show:true,axisLabel:{interval:0,alignWithLabel:true,}},yAxis: [{type: 'value',boundaryGap: [0, '100%'],}],series: [{name: 'babble1', data: data.data1, type: 'line'}]//例子 [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'},{data: [120, 332, 201, 434, 190, 330, 320], type: 'line'}]// [{name: '一级保护区', data: [220, 182, 191, 234, 290, 330, 310, 250, 260, 280]}]//[5, 20, 36, 10, 10, 20]});},error: function (e) {alert("Error");console.log(e.status);console.log(e.responseText);}})}zoom_num.addEventListener('input', function(e) {// var ob=document.getElementById("g").getBoundingClientRect();if (e.target.tagName.toLowerCase() != 'input') return;if (!wholepanel) return;wholepanel.setAttribute('transform', "scale("+zoom.value+")translate("+movex.value+","+movey.value +")");});
//拖动对话框draggable1 = new PlainDraggable(document.getElementById('show1'));draggable2 = new PlainDraggable(document.getElementById('show2'));draggable3 = new PlainDraggable(document.getElementById('show3'));draggable4 = new PlainDraggable(document.getElementById('show4'));draggable5 = new PlainDraggable(document.getElementById('show5'));/* $(function() {$( "#tuoz" ).draggable();}); 实现html元素拖拽*///引入echarts的弹出框</script></html>
使用draggable.min.js插件实现多个元素拖拽
<!doctype html>
<html>
<head><meta charset="utf-8"><title>动态添加图形和图片并可以拖拽</title><meta content="width=device-width;initial-scale=1"><script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script src="svg.min.js"></script><script src="svg.draggable.min.js"></script><style>#drawing {width: 100%;height: 500px;margin: 0;}</style>
</head><body>
<!--向svg中添加元素-->
<svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg">
<g id="wholezoom" style="transform-origin: 0 0;position: absolute"></g>
</svg>
<button onclick="onLoad()">添加
</button>
</body>
<script>// <image x="-1" y="-1" width="960" height="596" xlink:href="images/eerduosi2.jpg" id="picture" />// 向svg中动态添加图形和图片//function onLoad(){var m,e, t, s,draw = SVG('wholezoom').attr({ 'font-size': 10 }).fill('#f57518')// 向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）//e = draw.rect(959,595).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 10000, maxY: 10000 })// 向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）var group = draw.group();var i1=draw.image("eerduosi2.jpg",959,595).center(480, 297)var c1=draw.circle(32,32).center(250, 206).id('c1')var c2=draw.circle(32,32).center(234, 390).id('c2')var c3=draw.circle(32,32).center(780, 200).id('c3')var c4=draw.circle(32,32).center(338, 110).id('c4')var c5=draw.circle(32,32).center(494, 318).id('c5')group.add(i1)group.add(c1)group.add(c2)group.add(c3)group.add(c4)group.add(c5)group.draggable({ minX: -4000, minY: -4000, maxX: 4000, maxY: 4000 })draw.fill('green')draw.stroke('black')// 在指定位置添加一个text标签//draw.plain('constrained with object and ghost').center(200, 210)//}
</script>
</html>使用draggable插件实现拖拽并用input range实现上下平移等
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><title>自动报警系统</title><script src="js/echarts_demo.js" type="text/javascript"></script><script src="js/echarts.js" type="text/javascript"></script><script src="js/jquery.js" type="text/javascript"></script><script src="js/java_index.js" type="text/javascript"></script><script src="js/plain-draggable.min.js" type="text/javascript"></script><script src="js/svg.min.js" type="text/javascript"></script><script src="js/svg.draggable.min.js" type="text/javascript"></script><link rel="stylesheet" href="css/index.css"><style>#show1{}.close:hover{color: darkred;}.inputk{text-decoration:none;border: solid 1px #AC8F73;height: 21px;}.button{background-color:#E7D9CB;color:#AC8F73;text-align:center;text-decoration:none;display:inline-block;cursor: pointer;border: solid 1px #AC8F73;font-weight: bold;font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";}</style>
</head>
<body style="background-color:#E7D9CB "><!--写名字-->
<div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink";style="width: 200px;height: 100px;margin-top: 0px;margin-left: 0px;position: absolute"><path d="M 50 30 L 53 38 M 35 38 L 71 38 M 35 38 L 34 70 L 33 88 L 32 91M 44 49 L 65 49 L 65 63 L 44 63 M 44 56 L 70 56 M 54 45 L 54 63M 45 74 L 63 74 L 63 84 L 45 84 Z"/><path d="M 100 32 L 99 50 L 98 60 L 97 71 L 110 90 M 94 40 L 120 40 M 112 40 L 110 56 L 109 68 L 103 90M 150 32 L 128 34 L 124 35 M 125 40 L 128 46 M 134 40 L 137 46 M 147 40 L 144 46M 125 51 L 146 51 M 122 61 L 149 61 M 132 51 L 130 65 L 124 90 M 130 70 L 144 70 L 142 80 L 134 90M 130 70 L 135 80 L 150 90 "/></svg>
</div>
<!-- 弹出框 -->
<div id="show1" style=" position: absolute;width: 380px;height: 278px;margin-left:180px;margin-top:40px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show1').style.display='none'" >x</span></div><div id="show_e1" style="width: 380px;height: 280px"></div>
</div>
<div id="show2" style=" position: absolute;width: 380px;height: 278px;display: none;margin-left:176px;margin-top:390px;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show2').style.display='none'" >x</span></div><div id="show_e2" style="width: 380px;height: 280px"></div>
</div>
<div id="show3" style=" position: absolute;width: 380px;height: 278px;margin-left:1104px;margin-top: 280px; display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show3').style.display='none'" >x</span></div><div id="show_e3" style="width: 380px;height: 280px"></div>
</div>
<div id="show4" style=" position: absolute;width: 380px;height: 278px;margin-left:710px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show4').style.display='none'" >x</span></div><div id="show_e4" style="width: 380px;height: 280px"></div>
</div>
<div id="show5" style=" position: absolute;width: 380px;height: 278px;margin-left:736px;margin-top:404px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show5').style.display='none'" >x</span></div><div id="show_e5" style="width: 380px;height: 280px"></div>
</div>
<!--左边的输入框-->
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 140px;position: absolute;left:58px;top:145px"><form style="text-align: center"><p style="margin-top: 16px;color:#AC8F73">请输入要增加 / 删除的参数名</p><input type="text" name="extra" class ="inputk" id="extra_cs" style="margin-top: 14px;background: #E7D9CB;background-color:transparent;padding-left: 10px" ><div style="width: 240px"><input type="button" class ="button"value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_option()"><input type="button"class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_option()"></div></form>
</div>
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 188px;position: absolute;left:58px;top:310px"><form style="text-align: center"><p style="margin-top: 24px;color:#AC8F73">请输入要增加/删除的数据</p><!-- <label style="font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;margin-left: 10px; margin-right: 10px">温度</label>--><select id="attr_select" style="color:#AC8F73;background-color:transparent"><option id="0" value="-请选择-">-请选择-</option><option id="1" value="温度">温度</option><option id="2" value="湿度">湿度</option></select><input type="text" class ="inputk" name="shuju" id="shuju" style="margin-top: 20px;background-color:transparent;padding-left: 10px" ><div style="width: 240px"><input type="button" class ="button" value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_panduan()"><input type="button" class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_panduan()"></div></form>
</div><svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg"><script xlink:href="SVGPan.js"/></svg>
<div style="position: absolute"><form id="zoom_num" style="margin-top: 10px;margin-left: 510px;"><label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">缩放</label><input id="zoom" type="range" value="1" min="0" step="0.01" max="2" style=""/><label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">平移x</label><input id="movex" type="range" value="1" min="-1000" step="6" max="1000" /><label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">平移y</label><input id="movey" type="range" value="1" min="-1000" step="6" max="1000" /></form>
</div></body><script type="text/javascript">var SVG_NS = 'http://www.w3.org/2000/svg';var wholepanel = document.getElementById("wholezoom");var zoom_num = document.getElementById("zoom_num");var i=3; //全局变量，id值不断增大//echarts初始折线图//会自动跳转到另一个新页面*/function bld_echarts(id) {var gid=id.toString();var sid;if(gid==("c1")){var myChart = echarts.init(document.getElementById("show_e1"));sid=document.getElementById("show1");}else if(gid==("c2")){var myChart = echarts.init(document.getElementById("show_e2"));sid=document.getElementById("show2");}else if(gid==("c3")){var myChart = echarts.init(document.getElementById("show_e3"));sid=document.getElementById("show3");}else if(gid==("c4")){var myChart = echarts.init(document.getElementById("show_e4"));sid=document.getElementById("show4");}else if(gid==("c5")){var myChart = echarts.init(document.getElementById("show_e5"));sid=document.getElementById("show5");} else alert("弹出错误");if(sid.style.display=="none"){// $("#show1").css("width",wid);// $("#show1").css("height",hei);sid.style.display="block";//显示div}else if(show1.style.display=="block"){sid.style.display="none";//隐藏div}$.ajax({url: "/ech_data",data:{id:gid,},dataType: "json",//数据格式type: "post",//请求方式async: false,//是否异步请求success: function (data) { //如果请求成功，返回数据。alert(JSON.stringify(data.data1));alert(JSON.stringify(data.x_data));myChart.setOption({title: {text: data.title,},tooltip: {trigger: 'axis'},legend:{data: ['温度', '湿度','风力']// data: ['一级保护区', '二级保护区','准保护区']},xAxis: {type: 'category',data: data.x_data,boundaryGap:true,show:true,axisLabel:{interval:0,alignWithLabel:true,}},yAxis: [{type: 'value',boundaryGap: [0, '100%'],}],series: [{name: 'babble1', data: data.data1, type: 'line'}]//例子 [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'},{data: [120, 332, 201, 434, 190, 330, 320], type: 'line'}]// [{name: '一级保护区', data: [220, 182, 191, 234, 290, 330, 310, 250, 260, 280]}]//[5, 20, 36, 10, 10, 20]});},error: function (e) {alert("Error");console.log(e.status);console.log(e.responseText);}})}//拖动对话框draggable1 = new PlainDraggable(document.getElementById('show1'));draggable2 = new PlainDraggable(document.getElementById('show2'));draggable3 = new PlainDraggable(document.getElementById('show3'));draggable4 = new PlainDraggable(document.getElementById('show4'));draggable5 = new PlainDraggable(document.getElementById('show5'));/* $(function() {$( "#tuoz" ).draggable();}); 实现html元素拖拽*///引入echarts的弹出框var m,e, t, s,draw = SVG('svg').attr({ 'font-size': 10 }).fill('#f57518')// 向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）//e = draw.rect(959,595).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 10000, maxY: 10000 })// 向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）var group = draw.group().id('wholezoom')var i1=draw.image("images/eerduosi2.jpg",959,595).center(480, 297).id('picture')var c1=draw.circle(32,32).center(250, 206).id('c1')var c2=draw.circle(32,32).center(234, 390).id('c2')var c3=draw.circle(32,32).center(780, 200).id('c3')var c4=draw.circle(32,32).center(338, 110).id('c4')var c5=draw.circle(32,32).center(494, 318).id('c5')group.add(i1)group.add(c1)group.add(c2)group.add(c3)group.add(c4)group.add(c5)document.getElementById("wholezoom").style.position='absolute';group.attr('transform-origin','50% 50%' );group.draggable({ minX: -4000, minY: -4000,maxX: 4000, maxY: 4000 })draw.fill('green')draw.stroke('black')//实现左右平移等zoom_num.addEventListener('input', function(e) {// var ob=document.getElementById("g").getBoundingClientRect();if (e.target.tagName.toLowerCase() != 'input') return;/*if (!wholepanel) {alert("!!!");return}; *///wholepanel.setAttribute('transform', "scale("+zoom.value+")translate("+movex.value+","+movey.value +")"); 得不到if (!group) {return};group.attr('transform',"scale("+zoom.value+")translate("+movex.value+","+movey.value +")" );});
</script></html>
使用d3.v4.js使用移动 缩放 拖拽
<!DOCTYPE html>
<html>
<head><title>Demo</title><script src="https://d3js.org/d3.v4.min.js"></script><script src="svg.min.js"></script><script src="svg.draggable.min.js"></script>
</head><body>
<div style="top:5px"><button id="reset">reset</button><button id="zoomIn">-</button><button id="zoomOut">+</button><button id="translateX">-></button><button id="translateY">xia</button>
</div><svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg"></svg><script>let svg = d3.select("svg"),width = +svg.attr("width"),height = +svg.attr("height");let g = svg.append("g");g.append("text").attr("x", width/2).attr("y", height/2).text("测试按钮放大、缩小Demo");let zoom = d3.zoom().on("zoom", function(){ // zoom事件console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);console.log(`D3: : ${d3.event.transform}`);g.attr("transform", d3.zoomTransform(svg.node()));});svg.call(zoom);d3.select("#reset").on("click", function(d){svg.call(zoom.transform, d3.zoomIdentity);});d3.select("#zoomIn").on("click", function(d) {zoom.scaleBy(svg, 0.9); // 执行该方法后 会触发zoom事件let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新console.log(tran);});d3.select("#zoomOut").on("click", function(d) {zoom.scaleBy(svg, 1.1); // 执行该方法后 会触发zoom事件let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新console.log(tran);});d3.select("#translateX").on("click", function(d) {zoom.translateBy(svg, 10, 0);let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);console.log(tran);});d3.select("#translateY").on("click", function(d) {zoom.translateBy(svg, 0, 10);let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);console.log(tran);});
</script>
</body></html>
上面一版 多个元素改良版
<!DOCTYPE html>
<html>
<head><title>Demo</title><script src="https://d3js.org/d3.v4.min.js"></script><script src="svg.min.js"></script><script src="svg.draggable.min.js"></script>
</head><body>
<div style="top:5px"><button id="reset">reset</button><button id="zoomIn">-</button><button id="zoomOut">+</button><button id="translateX">-></button><button id="translateY">xia</button>
</div><svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg"></svg><script>var m,e, t, s,draw = SVG('svg').attr({ 'font-size': 10 }).fill('#f57518')// 向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）//e = draw.rect(959,595).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 10000, maxY: 10000 })// 向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）var group = draw.group().id('wholezoom')var i1=draw.image("eerduosi2.jpg",959,595).center(480, 297).id('picture')var c1=draw.circle(32,32).center(250, 206).id('c1')var c2=draw.circle(32,32).center(234, 390).id('c2')var c3=draw.circle(32,32).center(780, 200).id('c3')var c4=draw.circle(32,32).center(338, 110).id('c4')var c5=draw.circle(32,32).center(494, 318).id('c5')group.add(i1)group.add(c1)group.add(c2)group.add(c3)group.add(c4)group.add(c5)let svg = d3.select("svg"),width = +svg.attr("width"),height = +svg.attr("height");let zoom = d3.zoom().on("zoom", function(){ // zoom事件console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);console.log(`D3: : ${d3.event.transform}`);group.attr("transform", d3.zoomTransform(svg.node()));});svg.call(zoom);d3.select("#reset").on("click", function(d){svg.call(zoom.transform, d3.zoomIdentity);});d3.select("#zoomIn").on("click", function(d) {zoom.scaleBy(svg, 0.9); // 执行该方法后 会触发zoom事件let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新console.log(tran);});d3.select("#zoomOut").on("click", function(d) {zoom.scaleBy(svg, 1.1); // 执行该方法后 会触发zoom事件let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新console.log(tran);});d3.select("#translateX").on("click", function(d) {zoom.translateBy(svg, 10, 0);let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);console.log(tran);});d3.select("#translateY").on("click", function(d) {zoom.translateBy(svg, 0, 10);let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);console.log(tran);});
</script>
</body></html>
完成版！改良得很好了。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><title>自动报警系统</title><script src="js/echarts_demo.js" type="text/javascript"></script><script src="js/echarts.js" type="text/javascript"></script><script src="js/jquery.js" type="text/javascript"></script><script src="js/java_index.js" type="text/javascript"></script><script src="js/plain-draggable.min.js" type="text/javascript"></script><link rel="stylesheet" href="css/index.css"><script src="https://d3js.org/d3.v4.min.js"></script><script src="js/svg.min.js" type="text/javascript"></script><script src="js/svg.draggable.min.js" type="text/javascript"></script><style>#show1{}.close:hover{color: darkred;}.inputk{text-decoration:none;border: solid 1px #AC8F73;height: 21px;}.button{background-color:#E7D9CB;color:#AC8F73;text-align:center;text-decoration:none;display:inline-block;cursor: pointer;border: solid 1px #AC8F73;font-weight: bold;font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";}.buttond{background-color:#E7D9CB;color:#AC8F73;text-align:center;text-decoration:none;display:inline-block;cursor: pointer;border: solid 1px #AC8F73;font-weight: bold;font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";}</style>
</head>
<body style="background-color:#E7D9CB "><!--写名字-->
<div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"xmlns:xlink="http://www.w3.org/1999/xlink";style="width: 200px;height: 100px;margin-top: 0px;margin-left: 0px;position: absolute"><path d="M 50 30 L 53 38 M 35 38 L 71 38 M 35 38 L 34 70 L 33 88 L 32 91M 44 49 L 65 49 L 65 63 L 44 63 M 44 56 L 70 56 M 54 45 L 54 63M 45 74 L 63 74 L 63 84 L 45 84 Z"/><path d="M 100 32 L 99 50 L 98 60 L 97 71 L 110 90 M 94 40 L 120 40 M 112 40 L 110 56 L 109 68 L 103 90M 150 32 L 128 34 L 124 35 M 125 40 L 128 46 M 134 40 L 137 46 M 147 40 L 144 46M 125 51 L 146 51 M 122 61 L 149 61 M 132 51 L 130 65 L 124 90 M 130 70 L 144 70 L 142 80 L 134 90M 130 70 L 135 80 L 150 90 "/></svg>
</div>
<!-- 弹出框 -->
<div id="show1" style=" position: absolute;width: 380px;height: 278px;margin-left:180px;margin-top:40px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show1').style.display='none'" >x</span></div><div id="show_e1" style="width: 380px;height: 280px"></div>
</div>
<div id="show2" style=" position: absolute;width: 380px;height: 278px;display: none;margin-left:176px;margin-top:390px;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show2').style.display='none'" >x</span></div><div id="show_e2" style="width: 380px;height: 280px"></div>
</div>
<div id="show3" style=" position: absolute;width: 380px;height: 278px;margin-left:1104px;margin-top: 280px; display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show3').style.display='none'" >x</span></div><div id="show_e3" style="width: 380px;height: 280px"></div>
</div>
<div id="show4" style=" position: absolute;width: 380px;height: 278px;margin-left:710px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show4').style.display='none'" >x</span></div><div id="show_e4" style="width: 380px;height: 280px"></div>
</div>
<div id="show5" style=" position: absolute;width: 380px;height: 278px;margin-left:736px;margin-top:404px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999"><div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show5').style.display='none'" >x</span></div><div id="show_e5" style="width: 380px;height: 280px"></div>
</div>
<!--左边的输入框-->
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 140px;position: absolute;left:58px;top:145px"><form style="text-align: center"><p style="margin-top: 16px;color:#AC8F73">请输入要增加 / 删除的参数名</p><input type="text" name="extra" class ="inputk" id="extra_cs" style="margin-top: 14px;background: #E7D9CB;background-color:transparent;padding-left: 10px" ><div style="width: 240px"><input type="button" class ="button"value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_option()"><input type="button"class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_option()"></div></form>
</div>
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 188px;position: absolute;left:58px;top:310px"><form style="text-align: center"><p style="margin-top: 24px;color:#AC8F73">请输入要增加/删除的数据</p><!-- <label style="font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;margin-left: 10px; margin-right: 10px">温度</label>--><select id="attr_select" style="color:#AC8F73;background-color:transparent"><option id="0" value="-请选择-">-请选择-</option><option id="1" value="温度">温度</option><option id="2" value="湿度">湿度</option></select><input type="text" class ="inputk" name="shuju" id="shuju" style="margin-top: 20px;background-color:transparent;padding-left: 10px" ><div style="width: 240px"><input type="button" class ="button" value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_panduan()"><input type="button" class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_panduan()"></div></form>
</div><svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg"><script xlink:href="SVGPan.js"/></svg>
<div style="position: absolute;width: 100%"><div style="margin-top:10px;margin-left: 40%"><label class="buttond" style="border: none">整体:</label><button id="reset" class="buttond">重置</button><button id="zoomIn" class="buttond" >缩小</button><button id="zoomOut" class="buttond" >放大</button><button id="translateXL" class="buttond">左移</button><button id="translateXR" class="buttond">右移</button><button id="translateYU" class="buttond">上移</button><button id="translateYD" class="buttond">下移</button></div>
</div></body><script type="text/javascript">var SVG_NS = 'http://www.w3.org/2000/svg';var wholepanel = document.getElementById("wholezoom");var zoom_num = document.getElementById("zoom_num");var i=3; //全局变量，id值不断增大//echarts初始折线图//会自动跳转到另一个新页面*/function bld_echarts(id) {alert(id);var gid=id;var sid;if(gid==("c1")){var myChart = echarts.init(document.getElementById("show_e1"));sid=document.getElementById("show1");}else if(gid==("c2")){var myChart = echarts.init(document.getElementById("show_e2"));sid=document.getElementById("show2");}else if(gid==("c3")){var myChart = echarts.init(document.getElementById("show_e3"));sid=document.getElementById("show3");}else if(gid==("c4")){var myChart = echarts.init(document.getElementById("show_e4"));sid=document.getElementById("show4");}else if(gid==("c5")){var myChart = echarts.init(document.getElementById("show_e5"));sid=document.getElementById("show5");} else alert("弹出错误");if(sid.style.display=="none"){// $("#show1").css("width",wid);// $("#show1").css("height",hei);sid.style.display="block";//显示div}else if(show1.style.display=="block"){sid.style.display="none";//隐藏div}$.ajax({url: "/ech_data",data:{id:gid,},dataType: "json",//数据格式type: "post",//请求方式async: false,//是否异步请求success: function (data) { //如果请求成功，返回数据。alert(JSON.stringify(data.data1));alert(JSON.stringify(data.x_data));myChart.setOption({title: {text: data.title,},tooltip: {trigger: 'axis'},legend:{data: ['温度', '湿度','风力']// data: ['一级保护区', '二级保护区','准保护区']},xAxis: {type: 'category',data: data.x_data,boundaryGap:true,show:true,axisLabel:{interval:0,alignWithLabel:true,}},yAxis: [{type: 'value',boundaryGap: [0, '100%'],}],series: [{name: 'babble1', data: data.data1, type: 'line'}]//例子 [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'},{data: [120, 332, 201, 434, 190, 330, 320], type: 'line'}]// [{name: '一级保护区', data: [220, 182, 191, 234, 290, 330, 310, 250, 260, 280]}]//[5, 20, 36, 10, 10, 20]});},error: function (e) {alert("Error");console.log(e.status);console.log(e.responseText);}})}//拖动对话框draggable1 = new PlainDraggable(document.getElementById('show1'));draggable2 = new PlainDraggable(document.getElementById('show2'));draggable3 = new PlainDraggable(document.getElementById('show3'));draggable4 = new PlainDraggable(document.getElementById('show4'));draggable5 = new PlainDraggable(document.getElementById('show5'));//引入echarts的弹出框var m,e, t, s,draw = SVG('svg').attr({ 'font-size': 10 }).fill('#f57518')// 向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）//e = draw.rect(959,595).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 10000, maxY: 10000 })// 向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）var group = draw.group().id('wholezoom')var i1=draw.image("images/eerduosi2.jpg",959,595).center(480, 297).id('picture')var c1=draw.circle(32,32).center(250, 206).id('c1')var c2=draw.circle(32,32).center(234, 390).id('c2')var c3=draw.circle(32,32).center(780, 200).id('c3')var c4=draw.circle(32,32).center(338, 110).id('c4')var c5=draw.circle(32,32).center(494, 318).id('c5')var text1=draw.text("1").center(250,206).id('text1')var text2=draw.text("2").center(234,390).id('text2')var text3=draw.text("3").center(780, 200).id('text3')var text4=draw.text("4").center(338, 110).id('text4')var text5=draw.text("5").center(494, 318).id('text5')group.add(i1)group.add(c1)group.add(c2)group.add(c3)group.add(c4)group.add(c5)group.add(text1); group.add(text2); group.add(text3); group.add(text4); group.add(text5);draw.fill('green')draw.stroke('black')let svg = d3.select("#svg"),width = +svg.attr("width"),height = +svg.attr("height");let zoom = d3.zoom().on("zoom", function(){ // zoom事件console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);console.log(`D3: : ${d3.event.transform}`);group.attr("transform", d3.zoomTransform(svg.node()));});svg.call(zoom);d3.select("#c1").on("click",function (){bld_echarts("c1");});d3.select("#text1").on("click",function (){bld_echarts("c1");});d3.select("#c2").on("click",function (){bld_echarts("c2");});d3.select("#text2").on("click",function (){bld_echarts("c2");});d3.select("#c3").on("click",function (){bld_echarts("c3");});d3.select("#text3").on("click",function (){bld_echarts("c3");});d3.select("#c4").on("click",function (){bld_echarts("c4");});d3.select("#text4").on("click",function (){bld_echarts("c4");});d3.select("#c5").on("click",function (){bld_echarts("c5");});d3.select("#text5").on("click",function (){bld_echarts("c5");});d3.select("#reset").on("click", function(d){svg.call(zoom.transform, d3.zoomIdentity);});d3.select("#zoomIn").on("click", function(d) {zoom.scaleBy(svg, 0.9); // 执行该方法后 会触发zoom事件let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新console.log(tran);});d3.select("#zoomOut").on("click", function(d) {zoom.scaleBy(svg, 1.1); // 执行该方法后 会触发zoom事件let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新console.log(tran);});d3.select("#translateXL").on("click", function(d) {zoom.translateBy(svg, -10, 0);let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);console.log(tran);});d3.select("#translateXR").on("click", function(d) {zoom.translateBy(svg, 10, 0);let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);console.log(tran);});d3.select("#translateYU").on("click", function(d) {zoom.translateBy(svg, 0, -10);let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);console.log(tran);});d3.select("#translateYD").on("click", function(d) {zoom.translateBy(svg, 0, 10);let tran = d3.zoomTransform(svg.node());// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);console.log(tran);});
</script></html>
svg实现多个元素拖拽相关推荐
- dom 元素拖拽实现
文章目录 原生 JS 实现 div 拖拽 HTML 拖拽 API REF 之前找实习的时候,面试官出了道 "原生 JS 实现 div 元素拖拽",当时实现了个大概,不过很多细节 ...
- jquery回弹_创意网页DOM元素拖拽弹性反弹和变形动画特效
这是一款非常有创意的HTML网页DOM元素拖拽弹性反弹和变形动画特效.这个特效中有两种效果:第一种是弹性模态窗口效果,第二种是弹性幻灯片效果.这两种效果均可以拖拽DOM元素,然后释放它们时生成非常震撼 ...
- 实现元素拖拽放大缩小_Vue实战067：DOM元素拖拽效果的实现
DOM元素拖拽效果: 当鼠标选中目标元素之后可以将其拖放至指定区域的任意位置,实现的思路主要是通过鼠标事件按下.移动.抬起,摁下鼠标时记录鼠标位置以及元素位置并算出鼠标相对元素的位置,在拖拽时记下当前 ...
- 原生js实现元素拖拽onmousedown/onmousemove/onmouseup
文章目录 前言 一.实现思路 二.具体步骤 1.鼠标在元素上按下时 2.鼠标拖拽元素时 3.鼠标抬起事件 4.完整代码 总结 前言 我们在网页操作的时候,经常用到鼠标拖拽元素的行为.本篇文章就来讨论一 ...
- 图片img或者含有img元素拖拽时，或者scale缩放时产品的阴影效应问题
图片img或者含有img元素拖拽时,或者用scale缩放时产品的阴影效应问题 html中有图片img或者含有img元素拖拽时,或者scale缩放时产品的阴影效应问题,也就是图片重影, 另外使用scal ...
- 前端小白用面向对象思想实现元素拖拽
上篇文章分享了如何用面向对象思想编写选项卡,在文章最后留了一个拖拽的例子,希望大家可以试着写一下,现在我就谈谈我在这过程中遇到的一些问题和解决方法.(本文主要是想和js初学者分享经验,代码中的更改th ...
- canvas 中的元素拖拽
实验室要求实现在canvas的元素的拖拽,即在canvas放置一些图标,实现用户拖拽并连线. 需要的知识(1)canvas drawImage方法 function draw(){ var image ...
- 移动端实现元素拖拽效果插件_基于自然流布局的可视化拖拽搭建平台设计方案...
LowCode 是高效.高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向--基于自然流布局的可视化搭建平台. ...
- Vue+el-tree，元素拖拽时出现禁用图标， 请看解决办法
项目需求:vue+el-tree实现节点拖拽到指定div播放视频: 问题:当节点拖拽时, 出现禁用图标: 一开始以为将禁用图标改变样式或隐藏就可以,一番尝试后, 发现这个图标可能是浏览器默认的, 经过 ...
最新文章
- 聚沙成塔 ： 第十六届智能车竞赛规则你一言，我一语
- matlab out of memory产生原因和解决办法
- 阜阳市乡镇企业中专学校计算机教师高翱简介,2017年中南林业科技大学博士研究生奖助学金...
- Python中的抽象超类
- OCS：运营商制胜3G的关键
- 关于Revit API修改元素参数的问题？
- 无盘服务器uefi启动,易乐游无盘网吧客户机使用UEFI启动教程
- 操作系统启动后 计算机处于 模式,电脑开机出现选择操作系统。怎么办？
- java 创建txt_JAVA读取TXT文件、新建TXT文件、写入TXT文件
- 汇编1-地址总线、数据总线与控制总线详解
- lenovo启动热键_联想的u盘启动快捷键是什么_电脑开机如何进入u盘启动
- win7讲述人修复_win7系统TTS语音引擎修复补丁
- jsp+servelt+mysql+tomcat 四六级单词查询系统
- KiCad坐标文件（.pos）转表格（.xlsx）工具
- 桑佛德大学计算机科学,美国桑佛德大学专业都有哪些？每个专业都有什么优势？一起来了解下吧？...
- 输出星期几的英文表示
- 一加七pro计算机没有记录了,尽享速度与激情：一加7T Pro 迈凯伦版评测
- 蛮荒搜神记服务器在维护,蛮荒搜神记法宝洗练图文教程 蛮荒搜神记如何提升战斗力？-游侠网...
- 【论文笔记】用循环一致性避免形变场重叠的医学图像配准网络
- 2021-03-15我的博客