nicht angemeldet
Hallo,
folgendes Problem mit meinem drag&drop-Script:
-> anscheinend werden bei FF mehr Maus-Bewegungen registriert als bei IE (?)
Ich habe eine div, darin das Bild eines Dia-Streifens (vertikal), wobei die
div einen niedrigeren height-Wert hat als das Bild (-> overflow: hidden;).
Über der div (also höherer z-index) liegt ein Bild von einem Dia-Rahmen.
Nun soll man mit drag&drop den Dia-Rahmen über den Dia-Streifen "schieben",
wobei in einem anderen Bereich immer das Bild zu sehen sein soll, über dessen
Dia-Streifen-Abschnitt sich gerade der Dia-Rahmen befindet.
Wenn der Rahmen an die obere bzw. untere Kante der div kommt, so soll das
Dia-Streifen-Bild entsprechend nach unten bzw. oben verschoben werden.
eine kl. Skizze:
-------
| [1] | -> [1] dies ist der Streifen (in dem die Bilder 1-6 zu
| [2] | [2] sehen sind (wobei es sich aber nur um ein image
|{[3]}| ... handelt
| [4] |
------- der gestrichelte Rahmen ist die div,
[5] { } ist das Dia-Rahmen-Bild
[6]
der (vereinfachte) HTML-Schnippsel hierzu sieht so aus:
<div><img src="bilder/diastrip.png" id="strip" /></div>
<div onmousedown="javascript:dragStart(this)"><img src="bilder/diarahmen.png" /></div>
<div id="bildbox"><img src="bilder/strip1.jpg" /></div>
das script:
function IDy(id) {
return document.getElementById(id).style;
}
function ID(id) {
return document.getElementById(id);
}
var dragObjekt = false;
var dragX = 0;
var dragY = 0;
var posX = 0;
var posY = 0;
var stripY;
document.onmousemove = drag;
document.onmouseup = new Function("dragObjekt=false");
document.onmousedown = new Function("return false");
function dragStart(element) {
dragObjekt = element;
dragX = posX - dragObjekt.offsetLeft;
dragY = posY - dragObjekt.offsetTop;
}
function drag(e) {
posX = document.all ? window.event.clientX : e.pageX;
posY = document.all ? window.event.clientY : e.pageY;
stripY = parseInt(IDy('strip').top);
if (dragObjekt != false) {
// 116 = Oberkante der div; 477 = Unterkante der div minus height des Rahmens
if ((posY - dragY) > 116 && (posY - dragY) < 477) {
dragObjekt.style.top = (posY - dragY) + "px";
}
else if ((posY - dragY) <= 116) {
dragObjekt.style.top = "116px";
stripDown();
}
else if ((posY - dragY) >= 477) {
dragObjekt.style.top = "477px";
stripUp();
}
// auf dem Streifen sind 10 Bildchen zu sehen, je von einer height von ca 52px
var stripMapTop = new Array(472, 420, 367, 315, 262, 210, 157, 105, 52, 0);
var stripMapBottom = new Array(523, 471, 419, 366, 314, 261, 209, 156, 104, 51);
var bild = ID('bildbox');
for (i=0; i<10; i++) {
if ((dragObjekt.offsetTop - 120) >= (stripMapTop[i] + stripY - 25) &&
(dragObjekt.offsetTop - 120) <= (stripMapBottom[i] + stripY - 25)) {
bild.src = imgs[i].src;
}
}
return false;
}
}
function stripDown() {
if (dragObjekt == false) {return;}
stripY = parseInt(IDy('strip').top);
if (stripY < 0) {
IDy('strip').top = stripY + 1 + 'px';
setTimeout('stripDown()', 10);
}
}
function stripUp() {
if (dragObjekt == false) {return;}
stripY = parseInt(IDy('strip').top);
if (stripY > -103) {
IDy('strip').top = stripY - 1 + 'px';
setTimeout('stripUp()', 10);
}
}
var imgs = new Array();
function preloadImgs() {
for (i=0;i<10;i++) {
imgs[i] = new Image();
imgs[i].src = "bilder/strip"+(i+1)+".jpg";
}
}
preloadImgs();
Bestimmt ist der Weg, wie ich über stripUp()/Down() die vertikale Bewegung
des Dia-Streifens handle, sehr stümperhaft - bin noch js-Anfäger...
Wenn mir jemand sagen kann, wie ich
(1) einen besseren Lösungsweg dafür finde, das Streifen-Bild zu bewegen,
wenn der Rahmen die obere/untere Kante der div erreicht, und/oder
(2) es bewerkstellige, dass sich der Streife in allen Browsern
gleichschnell bewegt, und/oder
(3) es erreichen kann, dass die Funktion drag() es sofort "schnallt", wenn
sich durch stripUp()/Down() die top-Koordinate des Streifen-Bildes ver-
ändert hat und dementsprechend mit dem Anzeigen des nun unter dem Rahmen-
Bildes befindlichen Bildchens in der "bildbox" reagiert,
dann wäre ich sehr, sehr dankbar!
Bin mal gespannt, ob sich überhaupt jemand durch diese Nachricht gewühlt hat :D
lieben Gruß
Struppi