Moinmoin,
@Sven
"... ein Teufelskreis. ..."
Naja, das kommt drauf an, was man möchte, und wie man die Sache betrachtet.
Noch mal von Anfang an:
"... Also: In einem Schulprojekt kam die Idee auf, einen PDF-Designer zu entwicklen,
ein OnlineGUI, welches per WYSIWYG ein PDF-Template erstellt und dann z.B. mit Daten
aus der DB füllt. Wäre z.B. für Entwickler, die einen Webschop anbieten, die Rechnungen
per PDF erzeugen möchten, aber sich mit der PDF-Generierung nicht auseinandersetzten mögen. ..."
Den Vorgang stelle ich mir also so vor:
Jemand geht auf die site, dragt und dropt und edidet sich irgendein Formular (hier eine Rechnung)
zusammen, clickt dann, wenn er mit dem Ergebnis zufrieden ist, irgendwann auf submit, und erhält
in return ein pdf-file zugesendet, mit dem er dann machen kann, was er möchte.
Ist das soweit richtig?
Die erste Aufgabe wäre demnach, "ein OnlineGUI" zu schreiben, da� so einfach und fehlerfrei als
irgend möglich arbeitet.
Wenn wir nun nicht anfangen möchten, über den Sinn und Zweck dieser Unternehmung zu diskutieren,
sondern es einfach mal als Aufgabe, die zu Lösen ist (und sei's blo� als Fingerübung) hinnehmen,
dann ist recht bald (sagen wir mal, nach dem Durchtesten in den ersten zehn browsern unter den
ersten zwo, drei Betriebssystemen) klar, da� man sich etwas "browserübergreifendes" im eigentlichen
(nämlich umfassenden) Sinn, am besten gleich von der Backe wischt - es sei denn, man möchte die
nächsten zwo Jahre damit verbringen.
Alleine, wenn man sich auf die gängigsten browser beschränkt (ich nehme jetzt mal moz + derivate,
ie, und, wenn's unbedingt sein mu�, opera (der zwingt einen mit seiner saublöden javascript-Implementierung
aber bereits zu allerlei Kompromissen)), ist man schon ein, zwei Wochen beschäftigt.
Diese Zeit braucht's einfach deshalb, weil man schlecht mehr als vier, fünf Zeilen schreiben kann, ohne
die tatsächlich in allen browsern zu überprüfen (das hat son bissel was von extreme programming),
die javascript-Interpretation ist in den Details (und auf die kommt's letztendlich an) einfach zu
unterschiedlich.
Um ein naheliegendes Beispiel zu geben: Die Testseite in Deinem Hilf-thread bringt opera zum Absturz.
Also: Heilsame Selbstbeschränkung, vor allem dann, wenn man sagt:
"... allerdings bin ich nicht der JS-Crack ..."
Unter diesem Gesichtspunkt ist es auch nicht ratsam, sich ein solches, in der Tat nicht wirklich
einfaches Ding wie das von WalterZ ans Bein zu binden.
Wenn Du sagst:
"... Das Drag&Drop (und übrigens auch Resize!!!) ist so komplex, ..."
dann hast Du damit recht, wenn Du wirklich sämtliche browser bedienen möchtest.
Ansonsten (also bei heilsamer Selbstbeschränkung) ist daran gar nichts komplex, es braucht
insgesamt höchstens zwanzig Zeilen, und das auch nur dann, wenn man wirklich jeder Kleinigkeit
eine eigne Zeile spendiert.
Viel mehr Mühe und �berlegung braucht der Entwurf einer sinnvollen Benutzeroberfläche.
Welche Funktionalitäten sollen bereitgestellt werden (fonts, font-sizes, auszeichnungen,
farbwahl- und änderung)?
Wie werden die zu bedienenden Elemente am besten angeordnet? Werden die in der site untergebracht,
oder steckt man die vielleicht besser in ein pop-up? Oder ist das bereits wieder zu verwirrend?
uswusfetcpp...
Und da hat man mit den unterschiedlichen browser-Verhaltensweisen mehr als genug zu tun.
Ich denke, es stellt sich weniger die Frage nach irgendwelchen Lizenzbedingungen (abgesehn mal
vom allgemeinen Intresse), sondern eher danach, was Du wirklich machen möchtest.
Damit Du siehst, was ich meine, im folgenden eine Beispiel-Skizze, in der aber bereits
eine Reihe kleinerer Problemchen auftauchen, über die man sich ein paar Tage den Kopf
zerbrechen könnte:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<html>
<head>
<title>drag_drop_resize_edit</title>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<style type='text/css'>
div{position:absolute;
font-family:verdana,sans-serif;
font-size:13px;
}
#buddy{position:absolute;
width:333px;
height:444px;
background:#dadada;
border-style:solid;
border-width:1px;
border-color:black;
}
img{position:absolute;
}
form{position:absolute;
top:20px;
left:20px;
}
input{width:255px;}
textarea{width:255px;height:200px;}
</style>
<script type='text/javascript'>
var L = 0, T = 0, W = 200, H = 100, V = 20, Bl, Bt,
d = document, ie = d.all && !window.opera, zI = 111, e, v, x, y,
BL = function(o){if(o.blur)o.blur()},
C = function(c){return D('buddy').appendChild(d.createElement(c))},
R = function(r){return D('buddy').removeChild(r)},
D = function(i){return d.getElementById(i)},
E = function() {e = ie ? event : arguments[0];
x = e.clientX;
y = e.clientY;
},
IH = function(o){return '<html><head><title>' +
(o ? o : 'ot') +
'</title></head><body>' +
D('buddy').innerHTML +
'</body></html>';
},
N = function(n){var o;
if(n)
{with(o = C('img'))
{src = d.fo.i_2_src.value;
alt = '';
};
}
else
{with(o = C('div'))
{innerHTML = d.fo.i_1_txt.value.replace(/ /g, ' ').replace(/r?n/g, '<br />');
};
};
o.m = 0;
o.n = o.tagName == 'DIV' ? 1 : 0;
o.l = P(o.style.left = L + 'px');
o.t = P(o.style.top = T + 'px');
o.w = P(o.style.width = W + 'px');
if(o.n) o.h = P(o.style.height = H + 'px');
if(o.n) o.style.background = 'lightblue';
if(o.n) o.style.padding = '4px';
o.onmousedown = function(){E(arguments[0]);
var t = this;
t.m = 1;
t.dx = x - t.l;
t.dy = y - t.t;
t.style.zIndex = zI++;
if(e.ctrlKey) v = 1;
t.style.cursor = v ? 'crosshair' : 'move';
return false;
};
o.onmousemove = function(){E(arguments[0]);
var t = this;
if(t.m)
{if(v)
{ t.w = t.style.width = x - t.l + V - Bl;
if(t.n) t.h = t.style.height = y - t.t + V - Bt;
t.style.cursor = 'crosshair';
}
else
{t.l = t.style.left = x - t.dx;
t.t = t.style.top = y - t.dy;
t.style.cursor = 'move';
};
};
return false;
};
o.ondblclick = function(){
R(this)
};
o.onmouseup = function(){this.m = 0;
this.style.cursor = 'default';
v = 0;
};
o.onmouseout = function(){this.m = 0;
this.style.cursor = 'default';
v = 0;
};
o.oncontextmenu = function(){return false};
},
P = function(p){return parseInt(p)};
onload = function(){D('buddy').oncontextmenu = function(){return false};
D('buddy').onselectstart = function(){return false};
Bl = P(D('buddy').style.left = '333px');
Bt = P(D('buddy').style.top = '20px');
D('BIG_B').style.background = '#222266';
d.fo.reset();
if(ie) d.fo.style.zIndex = -1;
};
</script>
</head>
<body id='BIG_B'>
<div id='buddy'></div>
<form name='fo' action=''>
<textarea name='i_1_txt'></textarea><br />
<input name='i_1' type='button' onclick='N();BL(this)' value='div' /><br /><br />
<input name='i_2_src' value='../../images/fr_1.jpg ' /><br />
<input name='i_2' type='button' onclick='N(1);BL(this)' value='image' /><br /><br />
<input name='i_3' type='button' onclick='alert(IH());BL(this)' value='HTML' />
</form>
</body>
</html>
Das ist jetzt ganz karo-einfach, es gibt lediglich zwo tags - images und divs -, wobei
ich allerdings glaube, da� sich damit das meiste erledigen lä�t, bei gedrückter ctrl-Taste
wird onmousedown+move resized, ansonsten verschoben.
Die resize-function ist absichtlich simpel gehalten, und für images auf die �nderung einer
Dimension beschränkt (was ich aber wiederum für ganz sinnvoll halte).
Unterschiede zwischen den verschiedenen browsern (wie gesagt: ie, moz, opera) gibt's bereits
hier mehr als einem lieb sein können.
gruÃ?
matho
