本文介绍了在SVG WebTopo中实现设备拖曳功能的挑战及解决方案，强调了坐标变换的重要性。在兼容性方面，特别是对于IE的embed需要设置wmode属性，同时针对IE和Opera对clientX的不同处理，采用不同的算法来计算鼠标点击位置。文章提到了相关的封装操作，如topo.js和movobjs.js，并提及了一个简洁的算法参考。
这回是真正的考验了，要实现设备的鼠标拖曳功能。
这个功能理论上比较简单，但是为了兼容性，几乎吐血。
实现的方法有很多，这里仅列举一种。
核心就在于坐标变换，主要有三点注意
针对ie的embed，需要注意设置wmode="Transparent"属性，这样可以不影响页面的鼠标事件。
再有就是IE/asv不支持offsetX方法，所以需要自行设法计算鼠标点击位置相对设备的坐标。
Ie和opera对clientx的取值不同ie是相对svg元素的坐标，opera是相对整个页面的坐标，因此移动函数采用了不同的算法。
6dev.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
设备
</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- legengd.html
1.显示设备（文字、图片）
2.拖动
-->
</head>
<script type="text/javascript" language="javascript" src="./js/moveObjs.js"></script>
<script type="text/javascript" language="javascript" src="./js/svgutil.js"></script>
<script type="text/javascript" language="javascript" src="./js/topo.js"></script>
<script>
</script>
<body bgcolor="#ffffff">
<br>
<button οnclick="show()">开始</button><br>
<button οnclick="zoomby(0.5)">缩小2倍cor</button>
<button οnclick="zoomby(2)">放大 2倍cor</button>
<button οnclick="zoom(1,300,300)">还原</button><br>
<button οnclick="showsrc()">源码</button><br>
最低0.47元/天 解锁文章
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
