求拖动图片可相对另外一张图片显示坐标的代码，在线等！详见帖子。

blues7 2004-10-10 10:47:18

如何实现一个可以拖动的图片，拖动时，在x,y的文本框里显示相对于另外一张图片的x、y坐标（不是相对于浏览器），且这个可拖动图片的src是一个文本框的值。
谢谢！

...全文

185 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

csdntzg 2004-10-10

打赏
举报

<html>
<head>
</head>
<body>
<img src="img/img2.gif" name="img2" width="468" height="205" id="img2">
<div id="Layer1" style="position:absolute; z-index:3" ondragstart="setCapture();xx=event.x-this.offsetLeft;yy=event.y-this.offsetTop;"
ondrag='this.style.left=event.x-xx;this.style.top=event.y-yy'
ondragend="releaseCapture();gogogo(this.style.left,this.style.top)">
<img id=img1>
</div>
<div id="Layer2" style="position:absolute; width:248px; height:104px; z-index:2; left: 60px; top: 229px;">
<p>src:
<input name="imgsrc" type="text" id="xy" value="img/img2.gif">
</p>
<p>x:
<input name="x2" type="text" id="x2">
</p>
<p>y:
<input name="y2" type="text" id="y2">
</p>
</div>
<script>
img1.src=document.all.imgsrc.value;
var x1=img2.offsetLeft;
var y1=img2.offsetTop;
function gogogo(xx,yy){
//var t=xx.parseInt(xx);
document.all.x2.value=parseInt(xx)-x1;
document.all.y2.value=parseInt(yy)-y1;
}
</script>
</body>
</html>

bflovesnow 2004-10-10

打赏
举报

自己查 MSDN 中对象的　offsetLeft/offsetTop 的用法

blues7 2004-10-10

打赏
举报

net_lover(孟子E章) ，我对javascript不熟，你能不能把完整代码帖出来？
麻烦你了！

孟子E章 2004-10-10

打赏
举报

把拖动的图片的相对于浏览器的x,y分别减去相对的那个图片相对于浏览器的x1,y1不就是吗

csdntzg 2004-10-10

打赏
举报

<html>
<head>
</head>
<body>
<img src="img/img2.gif" name="img2" width="468" height="205" id="img2">
<div id=Layer1 style='position:absolute; left: 498px; top: 12px;' onmousedown="MouseDown(this)" onmousemove="MouseMove()" onmouseup="MouseUp();gogogo(this.style.left,this.style.top);">
<img id=img1>
</div>
<div id="Layer2" style="position:absolute; width:248px; height:104px; z-index:2; left: 60px; top: 229px;">
<p>src:
<input name="imgsrc" type="text" id="xy" value="img/img2.gif">
</p>
<p>x:
<input name="x2" type="text" id="x2">
</p>
<p>y:
<input name="y2" type="text" id="y2">
</p>
</div>
<p>
<script>
img1.src=document.all.imgsrc.value;
var Obj
function MouseDown(obj){
Obj=obj
Obj.setCapture()
Obj.l=event.x-Obj.style.pixelLeft
Obj.t=event.y-Obj.style.pixelTop
Obj.style.cursor='crosshair'
}
function MouseMove(){
if(Obj!=null){
Obj.style.left = event.x-Obj.l
Obj.style.top = event.y-Obj.t
}
}
function MouseUp(){
if(Obj!=null){
Obj.releaseCapture()
Obj.style.cursor='default'
Obj=null
}
}

var x1=img2.offsetLeft;
var y1=img2.offsetTop;
function gogogo(xx,yy){
//var t=xx.parseInt(xx);
document.all.x2.value=parseInt(xx)-x1;
document.all.y2.value=parseInt(yy)-y1;
}
</script>
</body>
</html>

UG NX 2023（Unigraphics NX，中文名交互式 CAD/CAM 系统），是西门子 Siemens PLM Software 研发的 CAD/CAE/CAM 一体化产品工程解决方案，提供全套数字化造型与仿真验证手段。软件功能强悍，可轻松完成各类复杂实体、曲面造型构建，广泛应用于机械装备、塑胶模具、汽车零部件、航空航天、数控加工、钣金设计等工业领域。软件仅支持 Win10、Win11 64 位系统，不再兼容 Win7，硬件配置要求适中。软件集三维建模、工程制图、数控编程、力学与运动仿真等功能于一体，可兼容各类主流设计文件格式。该版本优化了装配加载速度、曲面建模能力与刀路算法，运行稳定，是当下行业主流版本。由于安装包文件过大，CSDN 无法直接上传，附件提供下载链接及配套安装教程，欢迎下载使用。

vivado XADC IP核使用教程

UG（Unigraphics NX）是一款由西门子（Siemens PLM Software）开发的交互式CAD/CAM/CAE系统。作为全球领先的产品工程解决方案，它集成了产品设计、工程仿真与制造加工于一体。其功能强大且应用广泛，能够轻松实现各种复杂实体和造型的构造，为模具、汽车、航空航天及通用机械等行业提供了高性能的机械设计与制图灵活性。

内容概要：本文详细介绍了利用Simulink进行变压器开路试验的电路连接配置与仿真实现方法，重点在于通过仿真手段还原实际电力系统中变压器在空载条件下的电气特性，从而深入理解其工作原理与性能表现。文章作为电力系统仿真系列研究的一部分，系统阐述了从电路模型搭建、参数设定、仿真运行到结果分析的完整流程，突出展示了MATLAB/Simulink在电力设备建模与教学科研中的强大功能与应用价值。; 适合人群：具备电力系统基础知识，熟悉MATLAB/Simulink仿真环境，从事电气工程、自动化及相关领域的研发人员，以及高年级本科生和研究生。; 使用场景及目标：①掌握变压器开路试验的基本原理与Simulink仿真建模的具体步骤；②通过仿真实验深入理解空载电流、铁芯损耗及励磁特性等关键参数的物理意义；③为后续开展变压器短路试验、暂态过程分析以及其他电力设备的仿真研究奠定理论与实践基础。; 阅读建议：建议结合Simulink软件动手实践，逐步构建并调试电路模型，重点关注各元件参数的设置方法与测量模块的应用技巧，同时推荐参考文中提及的其他相关仿真案例进行拓展学习，以全面提升对电力系统仿真实践的整体认知与操作能力。

SoloBlog.zip