Guten Tag,
anbei befindet sich ein Skript, das es ermöglichen soll, ein Auswahlrechteck auf das Dokument zu ziehen. Das Skript funktioniert auf MacOS in den Browsern Chrome und Safari, nicht aber einwandfrei im Firefox.
Hier läßt sich das Rechteck nur einmal fehlerfrei ziehen. Der erste Mouseup-Befehl wird noch umgesetzt. Bei dem Versuch ein zweites Rechteck zu ziehen, kommt es bereits im MouseMove zu Fehlern und der MouseUp wird ignoriert.
Der Firefox hat offenbar Schwierigkeiten mit dem Blockelement "protector", da die Darstellung fehlerfrei läuft, wenn der MouseDown-Befehl im Body-Element notiert ist und das "protector"-Element fehlt. Auf dieses möchte ich jedoch nicht verzichten, weil es verhindern soll, dass darunter liegende Bilder beim Ziehen mit der Maus markiert oder verschoben werden.
Hier das Skript (angelehnt an Drag&Drop von http://www.quaese.de):
Für Hinweise, wie man dieses Skript Firefox-kompatibel gestalten kann, wäre ich sehr dankbar.
Viele Grüße
Björn
anbei befindet sich ein Skript, das es ermöglichen soll, ein Auswahlrechteck auf das Dokument zu ziehen. Das Skript funktioniert auf MacOS in den Browsern Chrome und Safari, nicht aber einwandfrei im Firefox.
Hier läßt sich das Rechteck nur einmal fehlerfrei ziehen. Der erste Mouseup-Befehl wird noch umgesetzt. Bei dem Versuch ein zweites Rechteck zu ziehen, kommt es bereits im MouseMove zu Fehlern und der MouseUp wird ignoriert.
Der Firefox hat offenbar Schwierigkeiten mit dem Blockelement "protector", da die Darstellung fehlerfrei läuft, wenn der MouseDown-Befehl im Body-Element notiert ist und das "protector"-Element fehlt. Auf dieses möchte ich jedoch nicht verzichten, weil es verhindern soll, dass darunter liegende Bilder beim Ziehen mit der Maus markiert oder verschoben werden.
Hier das Skript (angelehnt an Drag&Drop von http://www.quaese.de):
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html,body {
margin:0;
height:100%;
width:100%;
}
</style>
<script type="text/javascript">
var objMask = null; // Maskierungsrechteck vormerken
var mouseX = 0; // X-Koordinate der Maus
var mouseY = 0; // Y-Koordinate der Maus
var posLeft = 0; // X-Startkoordinate
var posTop = 0; // Y-Startkoordinate
var tempWidth = 0; // aktuelle Auswahlbreite
var tempHeight = 0; // aktuelle Auswahlhöhe
// Browserweiche
IE = document.all&&!window.opera;
DOM = document.getElementById&&!IE;
// Initialisierungs-Funktion
function init(){
// Initialisierung der Überwachung der Events
document.onmousemove = select; // Bei Mausbewegung die Fkt. select aufrufen
document.onmouseup = stop; // Bei Loslassen der Maustaste die Fkt. stop aufrufen
}
// Wird aufgerufen, wenn die Maus über der Protectorbox gedrückt wird
function start(objElem) {
// Objekt der globalen Variabel zuweisen -> hierdurch wird Bewegung möglich
objMask = objElem;
// Neue Startposition merken
posLeft = mouseX;
posTop = mouseY;
// Falls schonmal das Objekt erstellt wurde
objMask.style.width = '0px';
objMask.style.height = '0px';
objMask.style.left = mouseX + "px";
objMask.style.top = mouseY + "px";
}
// Wird ausgeführt, wenn die Maus bewegt wird
function select(ereignis) {
// Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
mouseX = (IE) ? window.event.clientX : ereignis.pageX;
mouseY = (IE) ? window.event.clientY : ereignis.pageY;
// Neue Größe ermitteln
tempWidth = mouseX - posLeft;
tempHeight = mouseY - posTop;
// Wurde die Maus über einem Element gedrückt, erfolgt eine Bewegung
if (objMask != null) {
// Element neue Größe zuweisen
objMask.style.width = tempWidth + "px";
objMask.style.height = tempHeight + "px";
}
}
// Wird ausgeführt, wenn die Maustaste losgelassen wird
function stop() {
// Objekt löschen -> beim Bewegen der Maus wird die Maske nicht weiter verändert
objMask = null;
}
</script>
</head>
<body onload="init()">
<!-- <img src="" id="bild"> Hier würde ein Bild stehen, auf welchem später eine Auswahl getroffen wird. -->
<div id="maske" style="position:absolute; border:1px dotted #f00"></div>
<div id="protector" style="position:fixed; top:0; left:0; height:100%; width:100%" onmousedown="start(document.getElementById('maske'))"></div>
</body>
</html>Für Hinweise, wie man dieses Skript Firefox-kompatibel gestalten kann, wäre ich sehr dankbar.
Viele Grüße
Björn
