nicht angemeldet
Bilder bei Drag and Drop auf Raster einrasten lassen
Hallo,
ich schreibe gerade an einem Drag and Drop Script zum verschieben von Bildern. Dabei sollen die Bilder auf einem Raster "einrasten". Bis jetzt weiß ich aber noch nicht wie ich das bewerkstelligen soll. Ich wäre für alle Ideen und Vorschläge dankbar.
Hier das Script:
<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
var isNav4 = false;
var isW3C = false;
var isIE = false;
var dx = 0, dy = 0;
var objList = new Array();
var current = null;
var zIndexTop = 10;
function init()
{
if (navigator.appName.indexOf("Netscape") != -1){
if (parseInt (navigator.appVersion) == 4){
isNav4 = true;
} else if (parseInt (navigator.appVersion) >= 5){
isW3C = true;
}
} else {
if ((parseInt(navigator.appVersion) >= 4) &&
(navigator.appName.indexOf("Microsoft")!=-1)){
isIE = true;
}
if (navigator.userAgent.indexOf("Opera 5") != -1){
isIE = true;
}
}
erzeugeListe("bild1", "bild2", "bild3");
if ((isNav4) || (isW3C)) {
document.captureEvents(Event.MOUSEDOWN |
Event.MOUSEUP);
}
document.onmousedown = startDrag;
document.onmouseup = endDrag;
}
function erzeugeListe() {
for (var i = 0; i < erzeugeListe.arguments.length; i++) {
if (isNav4) {
objList[i] =
document.layers[erzeugeListe.argumente[i]];
}
}
}
function startDrag(e) {
var found = false;
var i = objList.length;
if (isNav4) {
var zIndexGefunden = 0;
var gefunden = 0;
while ((i > 0)) {
i--;
var obj = objList[i];
if ((e.pageX > obj.left) &&
(e.pageX < obj.left + obj.clip.width) &&
(e.pageY > obj.top) &&
(e.pageY < obj.top + obj.clip.height)) {
if (obj.zIndex > zIndexGefunden) {
found = true;
gefunden = i;
zIndexGefunden = obj.zIndex;
}
}
}
if(found) {
current = objList[gefunden];
dx = e.pageX - current.left;
dy = e.pageY - current.top;
zIndexTop++;
current.zIndex = zIndexTop;
document.captureEvents(Event.MOUSEOVER);
document.onmousemove = drag;
return false;
}
}
if (isW3C) {
var obj = e.target;
if ((obj.parentNode.id != null) &&
(obj.parentNode.id.indexOf("bild") != -1)) {
current = obj.parentNode.style;
dx = e.clientX - parseInt(current.left);
dy = e.clientY - parseInt(current.top);
zIndexTop++;
current.zIndex = zIndexTop;
document.captureEvents(Event.MOUSEOVER);
document.onmousemove = drag;
return false;
}
}
if(isIE) {
var obj = window.event.srcElement;
if ((obj.parentElement != null) &&
(obj.parentElement.id.indexOf("bild") != -1)) {
current = obj.parentElement.style;
dx = window.event.clientX - current.pixelLeft;
dy = window.event.clientY - current.pixelTop;
zIndexTop++;
current.zIndex = zIndexTop;
document.onmousemove = drag;
return false;
}
}
current = null;
return false;
}
function drag(e) {
if (current != null) {
if (isNav4) {
current.top = e.pageY - dy;
current.left = e.pageX -dx;
}
if (isW3C) {
current.top = parseInt(e.clientY) - dy;
current.left = parseInt(e.clientX) -dx;
}
if (isIE) {
current.pixelTop = window.event.clientY - dy;
current.pixelLeft = window.event.clientX -dx;
}
}
return false;
}
function endDrag(e){
if ((isNav4) || (isW3C)) {
document.releaseEvents(Event.MOUSEMOVE);
}
document.onmousemove = null;
current = null;
return false;
}
</script>
</head>
<body onload="init()">
<div id="bild1" style="position:absolute; left:50px; top:100px; width:120px; z-index:1;"><img name="objekt1" src=js10.gif width="30" height="30"
border="0"> </div>
<div id="bild2" style="position:absolute; left:70px; top:120px; width:115px; z-index:2;"><img name="objekt2" src=msie3.gif width="30" height="30"
border="0"> </div>
<div id="bild3" style="position:absolute; left:100px; top:150px; width:140px; z-index:3;"><img name="objekt3" src=netsc2.gif width="30" height="30"
border="0"> </div>
</body>
</html>
-
Hallo hkoenemann@web.de (fuer den Namen wuerde ich meine
Eltern schlagen ;),ich schreibe gerade an einem Drag and Drop Script zum
verschieben von Bildern. Dabei sollen die Bilder auf einem
Raster "einrasten".Oha, keine einfache Aufgabe. Nungut, fangen wir mal an,
nachzudenken: zuerst wuerde ich das Gatter ausrechnen, will
heissen, die Eckpunkte jedes Gitters in einem Array
speichern. Hierfuer wuerde ich ein eigenes
Koordinaten-System benutzen, damit ist einfacher zu
rechnen -- umrechnen auf Bildschirm-Koordinaten kannst du es
spaeter immer noch. Gut, weiter. Jetzt musst du, wenn ein
Element bewegt wird, die Position umrechnen in dein
virtuelles Koordinaten-System. Dort stellst du fest, in
welchem 'Gitter' das Objekt gerade ist. Wie du das am besten
herausfindest, haengt von deinem Gatter ab. Ich persoenlich
wuerde ein Gatter benutzen, dass in 5er-Schritten aufgespannt
ist, dann kannst du den zugehoerigen Wurzel-Punkt ueber
einfache Rundungs-Operationen herausfinden (Objekt an Punkt
P (17/12) waere dann im Gatter mit dem Wurzelpunkt 15/10).
Jetzt spannst du ueber drei Vektoren eine Ebene auf (der
erste Vektor ist der Vektor vom Nullpunkt des
Koordinaten-Systems zum Wurzelpunkt des Gatters, der zweite
Vektor ist der Vektor vom Wurzepunkt des Gatters zum oberen,
linken Punkt des Gatters und der dritte ist der Vektor vom
Wurzelpunkt des Gatters soweit nach rechts im
Koordinaten-System, wie das Gitter 'magnetisch' sein soll)
und schaust, ob das Objekt (dargestellt als Ebene durch
wieder 3 Vektoren) in der Ebene liegt. Wenn ja, Position zum
Gatter veraendern, wenn nein, Position lassen wie sie ist.
Dasselbe (nur mit entsprechend veraenderten Seiten) musst du
dann noch fuer die obere Kante, die untere Kante und die
rechte Kante machen.Klingt kompliziert, ist es aber eigentlich nicht. Man braucht
nur ein wenig Vektor-Rechnung.Gruesse,
CK-
Hallo Christian,
Jetzt spannst du ueber drei Vektoren eine Ebene auf
huch?
Also ich habe gelernt, daß eine Ebene von _zwei_
Vektoren beschrieben wird.
(_Drei_ Vektoren beschreiben schon einen Raum.)Du meinst nicht zufällig drei _Punkte_?
Oder ist einer Deiner drei Vektoren linear abhängig
von den beiden anderen (und damit entbehrlich)?Viele Grüße
Michael-
Hallo Michael,
Jetzt spannst du ueber drei Vektoren eine Ebene auf
huch?
Also ich habe gelernt, daß eine Ebene von _zwei_
Vektoren beschrieben wird.Von 2en, wenn du die Normalen-Form benutzt. Von dreien in der
Alternativ-Form :) Eine Ebene kann durch einen
Nullpunkt-Vektor und einen Normalen-Vektor beschrieben werden:<img src="/vektor01.png" border="0" alt="">
In dem Fall beschreibt der Normalenvektor die Masse der Ebene.
Im anderen Fall ist der eine Vektor lin. abhaengig vom
anderen, aber IMHO ist mit der Form einfacher zu rechnen:<img src="/vektor02.png" border="0" alt="">
(_Drei_ Vektoren beschreiben schon einen Raum.)
In der Normalenform, ja :) Ansonsten braucht man 4.
Oder ist einer Deiner drei Vektoren linear abhängig
von den beiden anderen (und damit entbehrlich)?Ja. Aber ich kann mit dieser Form einfach besser umgehen, die
Normalenform finde ich sehr umstaendlich.Gruesse,
CK
-
-