nicht angemeldet
Ebenen mit der Maus hin- und herschieben
Hallo zusammen,
ich benutze folgenden JS-Code, um Ebenen (die dynamischen Web-Content enthalten) mit der Maus auf dem Bildschirm hin- und herzuschieben.
Das Beispiel habe ich mir vor einigen Jahren irgendwo geklaut.
Ich finde leider die Seite nicht mehr.
Der JS-Code sieht folgendermaßen aus:
<SCRIPT LANGUAGE="JavaScript">
<!--
//----------------------------------------------------------
var objDrag = null; // Element, über dem Maus bewegt wurde
var mouseX = 0; // X-Koordinate der Maus
var mouseY = 0; // Y-Koordinate der Maus
var offX = 0; // X-Offset des Elements, das geschoben werden soll
var offY = 0; // Y-Offset des Elements, das geschoben werden soll
// Browserweiche
IE = document.all&&!window.opera;
DOM = document.getElementById&&!IE;
// Initialisierungs-Funktion
function init(){
// Initialisierung der Überwachung der Events
document.onmousemove = doDrag;
document.onmouseup = stopDrag;
}
// Wird aufgerufen, wenn die Maus über einer Box gedrückt wird
function startDrag(objElem) {
// Objekt der globalen Variabel zuweisen -> hierdurch wird Bewegung möglich
objDrag = objElem;
// Offsets im zu bewegenden Element ermitteln
offX = mouseX - objDrag.offsetLeft;
offY = mouseY - objDrag.offsetTop;
}
// Wird ausgeführt, wenn die Maus bewegt wird
function doDrag(ereignis) {
// Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
mouseX = (IE) ? window.event.clientX : ereignis.pageX;
mouseY = (IE) ? window.event.clientY : ereignis.pageY;
// Wurde die Maus über einem Element gedrück, erfolgt eine Bewegung
if (objDrag != null) {
// Element neue Koordinaten zuweisen
objDrag.style.left = (mouseX - offX) + "px";
objDrag.style.top = (mouseY - offY) + "px";
// Position in Statusleiste ausgeben
window.status = "Box-Position: " + objDrag.style.left + ", " + objDrag.style.top;
}
}
// Wird ausgeführt, wenn die Maustaste losgelassen wird
function stopDrag(ereignis) {
// Objekt löschen -> beim Bewegen der Maus wird Element nicht mehr verschoben
objDrag = null;
}
//-----------------------------------------------------------
-->
</SCRIPT>
Der Body der Seite wird mit folgendem JS-Code versehen:
<body onLoad="init();">
Die Ebene wird mit folgendem JS-Code versehen:
<div id="div_containerinfolist" name="div_containerinfolist" onmousedown="startDrag(this);">
...
</div>
Eines möchte ich klar stellen. Das funzt. Im Normalfall 1a.
Mein Spezialfall sind Ebenen, die mit Web-Content nur so vollgestopft sind. Es geht dann immer noch, nur beim Bewegen der Ebene ruckelt es ein wenig. Mir wärs egal. Die Kollegen maulen.
Gibt es irgendeine Chance, das Ruckeln abzuschalten?
Gruß aus Sachsenheim
Tommy
-
Hallo,
ich denke, die Funktion doDrag veranlasst das Ruckeln. Sie wird bei der kleinsten Mausbewegung aufgerufen, also für jeden Pixel.
Versuche, die Vergleichsfunktionen rauszunehmen. Warum muss bei jedem Pixel geprüft werden, ob es (immer noch) der IE ist? Hat sich schon mal der Browser geändert, während du die Maus schubst?
Und wozu ist es gut, die Maus-Position bei jedem Pixel auszugeben? Würde es nicht reichen, das am Ende der Bewegung zu tun?
> // Wird ausgeführt, wenn die Maus bewegt wird > function doDrag(ereignis) { > // Aktuelle Mauskoordinaten bei Mausbewegung ermitteln > mouseX = (IE) ? window.event.clientX : ereignis.pageX; > mouseY = (IE) ? window.event.clientY : ereignis.pageY; > > // Wurde die Maus über einem Element gedrück, erfolgt eine Bewegung > if (objDrag != null) { > // Element neue Koordinaten zuweisen > objDrag.style.left = (mouseX - offX) + "px"; > objDrag.style.top = (mouseY - offY) + "px"; > > // Position in Statusleiste ausgeben > window.status = "Box-Position: " + objDrag.style.left + ", " + objDrag.style.top; > } > }Linuchs
-
ich habe mir den Code mal genauer angesehen, weil er viel kleiner ist als den, den ich verwende. Bei mir wird z.B. das bewegte Element in den Vordergrund geholt (z-index), damit es nicht unter andere Elemente geschoben werden kann und dann bei mouseup "verloren" ist.
Mir fällt auf, dass bei *jeder* Mausbewegung die Funktion doDrag durchlaufen wird, also nicht nur, wenn vorher auf ein Element geklickt wurde.
Dies hier
document.onmousemove = doDrag;
sollte beim Start des Schiebens erfolgen und bei Ende wieder abgestellt werden.Möglicherweise arbeitet die Funktion noch, während sie schon wieder aufgerufen wird. Geht das eigentlich, mehrere Instanzen einer Javascript-Funktion?
Falls nein, müssen eben die vorherigen (unsinnigen) Aufrufe noch abgearbeitet werden.
Linuchs
-
Meine Herren,
Möglicherweise arbeitet die Funktion noch, während sie schon wieder aufgerufen wird. Geht das eigentlich, mehrere Instanzen einer Javascript-Funktion?
Funktionen sind gewöhnliche Objekte und können instanziiert, kopiert oder referenziert werden, wie du lustig bist.
Ich glaube deine Frage zielte aber eher auf Funktionsaufrufe und deren Bearbeitungs-Reihenfolge ab.
Dazu kann ich diesen Artikel von tutsplus empfehlen: Event-Based Programming: What Asynch Has Over Synch. Der Hauptverantwortliche für das Scheduling von JS-Code schimpft sich Event-Loop.
-
-
Hallo Linuchs,
eine Frage: Könntest Du mir mal Dein eigenes Script posten?
Ich dachte, es wäre mit dem Ruckeln etwas besser geworden, aber das war eine Täuschung.
Ich hatte das gemacht, was Du gesagt hast:- Die Browser-Abfrage rausnehmen (nur einmal prüfen und dann das entsprechende JS-Script laden).
- Das Schreiben der Koordinaten in die Statuszeile stoppen.
Momentan sieht es so aus: Das ist die Reihenfolge der Browser, wie sie das Bewegen der Ebene am besten hinbekommen:
Opera (Perfekt!)
Google Chrome (Nicht ganz so gut, aber ausreichend.)
Apple Safari (Etwas schlechter.)
Internet Explorer (Ruckelt sehr.)
Firefox (Ruckelt sehr.)Was kann ich noch tun?
Wie gesagt, die Ebenen sind voll gepackt mit HTML, CSS und JS.
Und natürlich dynamischen Seiten (PHP), aber der Code wird ja auf dem Server ausgeführt.Wichtig wäre mir der Mozilla, mit dem arbeiten wir hier alle.
Gruß
Thomas
-
-
Hallo Ihr Beiden,
habe den JS-Code tatsächlich - wie empfohlen - gestrafft und ein paar Zeilen auskommentiert (vgl. erste Antwort von Linuchs). Habe den Eindruck, es läuft jetzt flüssiger.
Wenn nicht, melde ich mich noch einmal. Danke erstmal für Eure Hilfe.
Gruß
Thomas