如何实现在网页上出现一个图片，让它可以拖动到任意位置。

[nuclears]

我做了一个发送消息的程序，类似于论坛的站内消息。当用户登陆后，如果有新消息，可以在屏幕上显示一个图片提示。现在想把它作成图片能够拖动的，不知该如何做。
我现在的做法是：做一个隐藏的ifarme隔一段时间刷新一次，如果检测到新消息，就调用一个函数，该函数会调用另一个文件，在屏幕上显示一个小图片。部分代码如下：
在主页面中有如下函数：
Function mail
Dim windowHeight
Dim windowWidth

windowWidth = window.document.body.clientWidth
windowHeight = window.document.body.clientHeight

If windowHeight<100 Or windowWidth<80 Then
window.document.all.item("frmDope").style.height = 100
window.document.all.item("frmDope").style.width = 80
window.document.all.item("frmDope").style.top = 50
window.document.all.item("frmDope").style.left = 40
Else
window.document.all.item("frmDope").style.height = windowHeight-10
window.document.all.item("frmDope").style.width = windowWidth-10
window.document.all.item("frmDope").style.top = 10
window.document.all.item("frmDope").style.left = 10
End If
window.document.all.item("frmDope").style.display = "none"
window.document.all.item("frmDope").style.zindex = 0

window.document.all.item("frmDopeCtl").style.height = 37
window.document.all.item("frmDopeCtl").style.width = 37
window.document.all.item("frmDopeCtl").style.top = 61
window.document.all.item("frmDopeCtl").style.left = windowWidth-40
window.document.all.item("frmDopeCtl").style.display = "none"
window.document.all.item("frmDopeCtl").style.zindex = 0
window.document.all.item("frmDopeCtl").src = "DopeList.asp"




window.document.all.item("frmDopeBackWork").src = "../GeneralManagement/Message/JudgeNewMessage.asp"
End Function

在DopeList.asp页面中只是有一个图片。

JudgeNewMessage.asp页面的主要代码如下：
Sub Window_OnLoad()
<%if ubound(aMsgInfo) <> -1 then%>

parent.window.document.all.item("frmDopeCtl").style.display = ""
parent.window.document.all.item("frmDopeCtl").style.zindex = 1000
<%else%>

parent.window.document.all.item("frmDopeCtl").style.display = "none"
parent.window.document.all.item("frmDopeCtl").style.zindex = 0
<%end if%>
End Sub

我做出的图片只能出现在屏幕的右上角，请问如何能让它可以随意拖动。

[saucer]

take a look at

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

and try to drag/drop the image

[pp4u]

第一断代码
</style>
<SCRIPT LANGUAGE="JavaScript">
//Modified by the CoffeeCup HTML Editor++
//http://www.coffeecup.com
// Global variables for platform branching
var isNav, isIE
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}

// ***Begin CSS custom API Functions***
// Set zIndex property
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
if (isNav) {
obj.moveTo(x,y)
} else {
obj.pixelLeft = x
obj.pixelTop = y
}
}
// ***End API Functions***

// Global holds reference to selected element
var selectedObj
// Globals hold location of click relative to element
var offsetX, offsetY

// Find out which element has been clicked on
function setSelectedElem(evt) {
if (isNav) {
// 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
// loop through all layers (starting with frontmost layer)
// to find if the event coordinates are in the layer
for (var i = document.layers.length - 1; i >= 0; i--) {
testObj = document.layers[i]
if ((clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height)) {
// if so, then set the global to the layer, bring it
// forward, and get outa here
selectedObj = testObj
setZIndex(selectedObj, 100)
return
}
}
} else {
// use IE event model to get the targeted element
var imgObj = window.event.srcElement
// make sure it's one of our planes
if (imgObj.parentElement.id.indexOf("plane") != -1) {
// then set the global to the style property of the element,
// bring it forward, and say adios
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}
// the user probably clicked on the background
selectedObj = null
return
}
// Drag an element
function dragIt(evt) {
// operate only if a plane is selected
if (selectedObj) {
if (isNav) {
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
} else {
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
// prevent further system response to dragging in IE
return false
}
}
}
// Set globals to connect with selected element
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
// set globals that remember where the click is in relation to the
// top left corner of the element so we can keep the element-to-cursor
// relationship constant throughout the drag
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
} else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
// block mouseDown event from forcing Mac to display
// contextual menu.
return false
}
// Restore elements and globals to initial values
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}
}
// Turn on event capture for Navigator
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
// Assign event handlers used by both Navigator and IE (called by onLoad)
function init() {
if (isNav) {
setNavEventCapture()
}
// assign functions to each of the events (works for both Navigator and IE)
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
}
</SCRIPT>


<DIV ID=plane1><IMG NAME="planePic1" SRC="Boy.gif" BORDER=0 width="176" height="47" alt="快点摇，再快点！！！"></DIV>
<DIV ID=plane2><IMG NAME="planePic1" SRC="Boy.gif" BORDER=0 width="176" height="47" alt="不用着急！"></DIV>

第二段代码：
<body bgcolor="#FFFFFF" onLoad="init()">

实现方法

　　将该效果源代码的第一段粘贴到页面源代码中<body>和</body>之间，然后把页面代码中的<body>换为

<body bgcolor="#FFFFFF" onLoad="init()"> ,可以把图片名称更换为你喜欢的图片（将boy.gif更换为其他名称）。

[nuclears]

谢谢saucer(思归, .NET MVP)
搞定！

pp4u的程序好象有点问题，我试了没成功。不过还是谢谢你了。

[Climber12]

up