img图像的鼠标拖动平移如何实现？

[soddy]

在网站开发gis，想实现图像平移漫游功能。
参考别人的js代码，我在onmousemove事件里添加了如下代码：
var ox2=window.event.x;
oy2=window.event.y;
var TT = document.all.viewImg;
var ImgLeft = 0;
var ImgTop = 0;
var ClipLeft,ClipTop,ClipRight,ClipBottom;
var DeltaX = TT.style.pixelLeft - ImgLeft;
var DeltaY = TT.style.pixelTop - ImgTop;
if (DeltaX > 0)
{
ClipLeft = 0;
ClipRight = TT.width - DeltaX;
}
else
{
ClipLeft = -DeltaX;
ClipRight = TT.width;
}
if(DeltaY > 0)
{
ClipTop = 0;
ClipBottom = TT.height - DeltaY;
}
else
{
ClipTop = -DeltaY;
ClipBottom = TT.height;
}
TT.style.clip = "rect(" + ClipTop + " " + ClipRight + " " + ClipBottom + " " + ClipLeft + ")";
document.all.viewImg.style.pixelLeft = ox2 - parseFloat(document.all.BoundDownX.value);
document.all.viewImg.style.pixelTop = oy2 - parseFloat(document.all.BoundDownY.value);

在onmousedown事件里面
document.all.BoundDownX.value = window.event.x;
document.all.BoundDownY.value = window.event.y;


但是现在发现没有达到拖曳图像移动的效果。哪位大哥帮我分析一下？

[klbt]

帮你up

[kewudemao]

下面的这些javascript function 实现image图象的移动，你研究一下吧。好长时间前写的，有点记不清楚了。

//////////////////////////////////////////////////////////////////////////
// NAME: ZoomScaleBar.js
//
// VERSION: 1.00
// DISCRIPTION: control the Zoom Scale bar
//
//////////////////////////////////////////////////////////////////////////

function InitBodyMouseEvent()
{
//to deal with the brower IE
if (navigator.appName == "Microsoft Internet Explorer") {
document.onmousedown = Engage
document.onmousemove = DragIt
document.onmouseup = Release
}
else if (navigator.appName == "Netscape") {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
document.onmousedown = Engage
document.onmousemove = DragIt
document.onmouseup = Release
}
}


function ShiftTo(obj,Y)
{
//IE
if (navigator.appName == "Microsoft Internet Explorer") {
obj.pixelTop = Y
}
//NS
else if (navigator.appName == "Netscape") {
obj.style.top = Y
}
}

function setSelectedElem(evt)
{
//IE
if (navigator.appName == "Microsoft Internet Explorer") {
var imgObj = window.event.srcElement
if (imgObj.parentElement.id.indexOf("ScaleCursor")!= -1)
{
ObjCursor = imgObj.parentElement.style
return
}
}
//NS
else if (navigator.appName == "Netscape") {
// declare local var for use in upcoming loop
var testObj
// make copies of event coords for use in upcoming loop
var clickX = evt.pageX
var clickY = evt.pageY
var LEFT,RIGHT,TOP,BOTTOM

testObj = document.getElementById("ScaleCursor")

LEFT=parseInt(testObj.style.left)
RIGHT=parseInt(testObj.style.left) +parseInt( testObj.style.width)
TOP=parseInt(testObj.style.top)
BOTTOM=parseInt(testObj.style.top) + parseInt(testObj.style.height)
if ((clickX > LEFT) && (clickX < RIGHT) && (clickY > TOP) && (clickY < BOTTOM)) {
// if so, then set the global to the layer, bring it
// forward, and get outa here
ObjCursor = testObj
return
}
}
ObjCursor = null
return
}

function DragIt(evt)
{
var Top,Bottom,DY
Top = 130
Bottom = 485

if(ObjCursor){
//IE
if (navigator.appName == "Microsoft Internet Explorer") {
if ( window.event.clientY >= Bottom)
{
DY = Bottom
}
else if (window.event.clientY <= Top)
{
DY = Top
}
else
{
DY = (window.event.clientY - offsetY)
}
ShiftTo(ObjCursor,DY)
return false
}
//NS
else if (navigator.appName == "Netscape") {
if ( evt.pageY >= Bottom)
{
DY = Bottom
}
else if (evt.pageY <= Top)
{
DY = Top
}
else
{
DY = (evt.pageY - offsetY)
}
ShiftTo(ObjCursor, DY)
return false
}

}
}

function Engage(evt)
{
//for test use
//var y
//y = window.event.clientY
//alert(y.toString())
setSelectedElem(evt)
if(ObjCursor){
//IE
if (navigator.appName == "Microsoft Internet Explorer") {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
return false
}
//NS
else if (navigator.appName == "Netscape") {
offsetX = evt.pageX - parseInt(ObjCursor.style.left)
offsetY = evt.pageY - parseInt(ObjCursor.style.top)
return false
}

}

}

function Release(evt)
{

if(ObjCursor)
{
OnZoomScaleChange(evt)
ObjCursor = null
}
}

function OnZoomScaleChange(evt)
{
var BasePt
var EndPt
var Diff
BasePt = 303
//IE
if (navigator.appName == "Microsoft Internet Explorer") {
EndPt = window.event.clientY
Diff = EndPt - BasePt
if (Diff < 0)
{
document.mapForm.curZoomScale.value = (1 - (Math.abs(Diff) / 180) * 3/4)
}
else
{
document.mapForm.curZoomScale.value = (1 + (Math.abs(Diff) / 180) * 3)
}

document.mapForm.submit()
}
//NS
else if (navigator.appName == "Netscape") {
EndPt = evt.pageY
Diff = EndPt - BasePt
if (Diff < 0)
{
document.mapForm.curZoomScale.value = (1 - (Math.abs(Diff) / 180) * 3/4)
}
else
{
document.mapForm.curZoomScale.value = (1 + (Math.abs(Diff) / 180) * 3)
}

document.mapForm.submit()
}

}

[李玮顾]

使用SuperMap IS .NET 5开发WebGIS，直接拖进来一个WebControl控件，就帮你生成好脚本了，包括支持平移、拉框、画圆、画多边形、点选等操作，还可以定义自己的事件。

除了地图控件，SuperMap IS还提供鹰眼、图层控制、工具栏、图例等控件，都是可视化编辑，直接拖到页面里就能使用。不再需要为脚本操心啦！

到 beta.supermap.com 注册可以免费下载试用。

[kewudemao]

创建的部分：
-------------------------------------------------------------
///////////////////////////////////////
///Create ZoomScaleBar
function CreateZoomScaleBar()
{

document.write("<table width=\"629\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" height=\"408\">")
document.write("<tr>")
document.write("<td width=\"502\" height=\"12\"></td>")
document.write("<td width=\"39\" rowspan=\"3\">  </td>")
document.write("<td rowspan=\"3\" valign=\"top\" width=\"88\">")
document.write("<table width=\"111\" border=\"0\" height=\"405\" cellpadding=\"0\" cellspacing=\"0\">")
document.write("<tr>")
document.write("<td height=\"223\" width=\"12\" rowspan=\"3\"> </td>")
document.write("<td height=\"23\"><IMG height=23 src=\"Images/da.gif\" width=25></td>")
document.write("</tr>")
document.write("<tr>")
document.write("<td height=\"112\" width=\"26\"><img src=\"images/rightxx_r1_c1.gif\" width=\"26\" height=\"363\"></td>")
document.write("<td height=\"112\" width=\"73\"><div id=\"ScaleCursor\" style=\"{position:absolute;left:590;Top:303;width:27;height:30;}\"><img src=\"images/rightxx_r1_c2.gif\" width=\"27\" height=\"30\"></div></td>")
document.write("</tr>")
document.write("<tr>")
document.write("<td height=\"23\"><IMG height=23 src=\"Images/xiao.gif\" width=25></td>")
document.write("</tr>")
document.write("</table>")
document.write("</td>")
document.write("</tr>")
document.write("<tr>")
document.write("<td width=\"502\">")
document.write("<table width=\"500\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" height=\"376\">")
document.write("<tr>")
document.write("<td rowspan=\"3\" width=\"10\" background=\"Images/Spacerkk.gif\"> </td>")
document.write("<td width=\"456\" background=\"Images/Spacerkk2.gif\" height=\"10\"></td>")
document.write("<td rowspan=\"3\" width=\"10\" background=\"Images/Spacerkkx.gif\"> </td>")
document.write("</tr>")
document.write("<tr>")
document.write("<td width=\"456\" height=\"355\"></td>")
document.write("</tr>")
document.write("<tr>")
document.write("<td width=\"456\" background=\"Images/Spacerkk2x.gif\" height=\"10\"></td>")
document.write("</tr>")
document.write("</table>")
document.write("</td>")
document.write("</tr>")
document.write("<tr>")
document.write("<td width=\"502\" height=\"19\"></td>")
document.write("</tr>")
document.write("<input type=\"hidden\" name=\"curZoomScale\" Value=\"1\">")
document.write("</table>")

}




-------------------------------------------------------------

[kewudemao]

调用的部分：
---------------------------------

<SCRIPT LANGUAGE = "JavaScript">
<!--
//gloabe variables used for zoom scale control
var ObjCursor
var offsetX,offsetY

InitBodyMouseEvent()


CreateZoomScaleBar()


</SCRIPT>






--------------------------------

[iwillsw]

方法就是这样的，仔细看看吧

[zkjbeyond]

你把图象放到<div>里。

移动图就是移动层。

[hant]

zkjbeyond(jigi)的办法最简单，也最易理解哈！

[soddy]

我是这样的：
<DIV onmouseup="UpXY()" onmousemove="MoveRect()" onmousedown="DownXY()" id="divimg" ondblclick="OnMouseDblClick()" style="LEFT: 0px; POSITION: absolute; TOP: 0px">
<IMG id="viewImg" style="LEFT: 0px; VISIBILITY: visible; POSITION: absolute; TOP: 0px" height="610" src="Map.aspx" width="700" GALLERYIMG="no">
</DIV>

在onmousedown事件里面
document.all.BoundDownX.value = window.event.x;
document.all.BoundDownY.value = window.event.y;

在onmousemove事件里面
var ox2=window.event.x;
var oy2=window.event.y;
document.all.divimg.style.pixelLeft = ox2 - parseFloat(document.WebGIS.BoundDownX.value);
document.all.divimg.style.pixelTop = oy2 - parseFloat(document.WebGIS.BoundDownY.value);

怎么还不行？好像要在鼠标弹起来后图片才会根着鼠标移动，而不是按住鼠标的时候图像移动。
另外，往右下角拖动的时候，屏幕上会出现滚动条，不想让他出现滚动条啊。

[wtusmchen12]

把img放在<div>里面
鼠标按下－－记录坐标x,y，以及blMouseDown=true;
鼠标移动－－如果blMouseDown==true then获得坐标x1,y1,，移动<DIV>(x1-x,y1-y)
鼠标弹起－－blMouseDown=false;

[soddy]

现在发现，图片能够移动，可是不是在按住鼠标的时候移动，松开鼠标的时候，图片都能移动。不知道怎么回事。而且按住鼠标拖动图片，鼠标变成一个禁止的符号，似乎不允许拖动的样子。
我图片是房子div里面的，如下：
<DIV onmouseup="UpXY()" onmousemove="MoveRect()" onmousedown="DownXY()" id="divimg" ondblclick="OnMouseDblClick()" style="LEFT: 0px; POSITION: absolute; TOP: 0px">
<IMG id="viewImg" style="LEFT: 0px; VISIBILITY: visible; POSITION: absolute; TOP: 0px" height="610" src="Map.aspx" width="700" GALLERYIMG="no">
</DIV>

[zkjbeyond]

http://www.walterzorn.com/dragdrop/dragdrop_e.htm
现成的。

[sungcong]

关注!!