nicht angemeldet
Dragging von Containern im Firefox
0 0 0 0 
MudGuard
Dragging von Containern im Firefox
Hallo zusammen,
folgendes Problem:
Ich möchte einen div-Container mit der Maus umherschieben können.
Mein Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
<style>
div { position:absolute; background:#ff0000; }
</style>
<script>
var drag = false;
var xPos = 0;
var yPos = 0;
var dx = 0, dy = 0;
function setUpEvents() {
var mapLayer = document.getElementById('testdiv');
mapLayer.style.cursor = "pointer";
mapLayer.onmousedown = startDragging;
mapLayer.onmousemove = doDrag;
mapLayer.onmouseup = stopDragging;
}
function startDragging(e) {
drag = true;
}
function stopDragging(e) {
drag = false;
}
function doDrag(e) {
if (drag == true) {
obj = document.getElementById('testdiv');
if (document.all) {
dx = window.event.x - dx;
dy = window.event.y - dy;
obj.style.left = xPos + dx;
obj.style.top = yPos + dy;
xPos = xPos + dx;
yPos = yPos + dy;
} else {
dx = e.pageX - dx;
dy = e.pageY - dy;
obj.style.left = xPos + dx;
obj.style.top = yPos + dy;
xPos = xPos + dx;
yPos = yPos + dy;
}
}
if (document.all) {
dx = window.event.x;
dy = window.event.y;
} else {
dx = e.pageX;
dy = e.pageY;
}
}
</script>
</head>
<body onload="java script:setUpEvents();">
<div id="testdiv"> <img id="testimg" src="08062005082640167.jpg">
</div>
</body>
</html>
Wie Ihr seht habe ich lediglich ein DIV-Container in dem sich wieder ein Bild befindet.
Im Internet Explorer funktioniert es. D.h ich kann in das Bild klicken und den Container verschieben.
Im Firefox funktioniert es nicht! Wenn man hier die Maus zu schnell bewegt bleibt der Container hängen.
Solbald ich das Bild aus dem Container entferne funktioniert es sowohl im IE als auch im Firefox.
Weiss jemand Rat?
Danke schonmal.
-
Hi,
Ich möchte einen div-Container mit der Maus umherschieben können.
Schau Dir das mal an:
http://anna.wendenburg.de/stefanie.htmlGruesse, Joachim
--
Am Ende wird alles gut. -
Hi Joachim,
<div id="testdiv" style="background-image:url('08062005082640167.jpg');"> </div>
statt
<div id="testdiv"> <img id="testimg" src="08062005082640167.jpg"></div>
müsste funktionieren, da das 'Überschneidungen' mit der Bilder-Drag-Drop
Funktion von Firefox (was ich hier als Ursache vermute) verhindert.
Natürlich musst du die Dimensionen deines div's dann noch anpassen oder
mit overflow das Hintergrundbild komplett anzeigen.Viel Spass,
Lin--
Mister rabbit says, "A moment of realization is worth a thousand prayers." -
Hi Joachim,
so wie ich das sehe ist das Problem, dass du den onmousemove-Event nur ueber den div capture-st (wie sagt man auf das auf Deutsch?). Wenn du nun den div bewegst und der Firefox mit dem Rendern nicht hinterherkommt, kann sich dein Mauszeiger schnell ausserhalb des divs befinden und der Event geht floeten.
Dass es mit dem IE funktioniert, liegt wohl daran, dass dieser in Sachen bewegten Elementen schon immer etwas schneller gerendert hat (Ich benutze ihn zwar nicht, ist aber mein Eindruck, wenn ich ihn dann doch mal zu Gesicht bekomme).
Die Loesung koennte also sein, dass du den onmousemove-Event direkt ueber das document-Objekt abgreifst (document.onmousemove). Am besten waehre es wenn du erst innerhalb von startDragging() document.onmousemove auf doDrag setzt und dann in stopDragging() wieder auf null.Grüsse, Lucien
-
Hi,
function doDrag(e) {
if (drag == true) {
if (document.all) {
} else {
dx = e.pageX - dx;
dy = e.pageY - dy;
obj.style.left = xPos + dx;Du weist der Property left eine Zahl zu - nötig wäre aber eine Länge oder ein Prozentwert oder 'inherit' oder 'auto'.
obj.style.top = yPos + dy;
Das gleiche nochmal.
<body onload="java script:setUpEvents();">
weder 'java' noch 'script:' sind an dieser Stelle sinnvoll.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.