nicht angemeldet
Drag und Drop eines Img im IE
Hi!
Ich habe folgendes Problem:
In einem Frame (das Fenster beinhaltet mehrere) soll ich ein Img mittels Drag and Drop bewegen können, nur irgendwie schaffe ich es nicht die Events richtig zu steuern.
Bitte um Hilfe,
wanderer
-
Tach
Wie sieht dein Lösungsansatz aus? Welche Events willst du wie steuern? Gibt's dazu noch Quelltext?
Schorsch
-
<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;// Mausposition
var posx = 0;
var posy = 0;function draginit() {
// Initialisierung der Überwachung der Eventsdocument.onmousemove = drag;
document.onmouseup = dragstop;
}function dragstart(element) {
//Wird aufgerufen, wenn ein Objekt bewegt werden soll.dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}function dragstop() {
//Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.dragobjekt=null;
}function drag(ereignis) {
//Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null)
{
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
}
//-->
</script>
</head>
<body onload="draginit()">
<div id="MapBlock" onmousedown="dragstart(this)" style="background-color:#FFFFFF; position:absolute; width:100%; height:100%;">
<img id=Map name="Map" src="C:\Dokumente und Einstellungen\dominik.MD\Desktop\{326066AB-CE93-4E26-A645-070E63923E13}.png" width="100%" height="100%" align="middle">
</div>
</body>
</html>-
Salut
Hab da mal:<div id="MapBlock" onmousedown="dragstart(this)" style="background-color:red; position:absolute; width:10%; height:10%;">
test
</div>den <div> etwas verkleinert und angerötet. Damit man genau sieht, was man wohin transportiert.
Bei mir funkionierte alles tip top.
Ich fand kein Problem.Schorsch
-
Danke mal im voraus schon für deinen Mühen, jedoch...
mit divs habe ich es auch schon geschafft, dass ist nicht das problem, den mit imgs funktioniert es nicht (als img habe ich ein PNG). Ich schick dir mal das frameset dazu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Verschubtest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset rows="*" cols="220,*" framespacing="1" frameborder="no" border="0" bordercolor="#999999">
<frameset rows="100,*" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="navigationframe.html" name="leftFrame" scrolling="no" noresize>
<frameset rows="*,165" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="emptyluki.htm" name="topFrame1" scrolling="auto" noresize >
<frame src="search_module.htm" name="bottomFrame1" scrolling="no" noresize>
</frameset>
</frameset>
<frameset rows="*,150" cols="*" framespacing="1" frameborder="no" border="0" bordercolor="#999999">
<frameset rows="60,*" frameborder="NO" border="0" framespacing="1">
<frame src="headerframe.htm" name="topFrame2" scrolling="NO" noresize >
<frameset cols="*,60" frameborder="NO" border="0" framespacing="1">
<frame src="XXX - test.htm - XXX" name="mainFrame" scrolling="no">
<frame src="mapnavigation.htm" name="rightFrame" scrolling="NO">
</frameset>
</frameset>
<frame src="att_engine.asp" name="bottomFrame" scrolling="AUTO" noresize>
</frameset>
</frameset>
<noframes>
<body bgcolor="#00FF66">
</body>
</noframes>
</html>den src für die test.htm kann man der vorigen [wanderer]msg entnehmen.
Für mich scheint es beinahe so, als hätten imgs einen flag, der ein verschieben verhindert.
Danke mal im Voraus, wanderer
PS: Entschuldigung für das mehrmalige posting, war nicht böse gemeint (wahsaga)
-
Hi!
Nachdem ich die Forumsmitglieder hier mit meiner Frage gequält habe, möchte ich nun auch eine mögliche Lösung präsentieren.
Problemstellung war, dass sich ein IMG anscheinend nicht ziehen lässt (Code in den Threads bevor). Eine mögliche Lösung ist, dass gewünschte Bild als Background des Divs zu laden, den dieses (das Div) hat kein Problem damit sich ziehen zu lassen.
Folge dessen anstatt:
<img id=Map onmousedown="dragstart(this)" name="Map" src="bild.png" width="100%" height="100%" align="middle" style:"position:absolute;">
<div id="MapBlock" onmousedown="dragstart(this)" style="background-image: url(bild.png); background-color:#FFFFFF; background-repeat:no-repeat;position:absolute ; width:100%; height:100%;">
Damit funktionierts!!
LG, wanderer
-
-
-
-