Christoph Zurnieden: "Zieh & Bonbon"

Hallo zusammen,

es gibt folgendes Problem: Ein Knoten soll auf einen anderen Knoten gezogen werden können und dort ein Signal auslösen, um vom Zielknoten ausgelesen werden zu können. Gegeben: Mozilla ab 1.3 (Das beinhaltet damit auch XUL) auf einer bootfähigen CDRom (Knoppix, also Debian GNU/Linux).
Beispiel, das nicht funktioniert und auch schon recht durcheinander ist, weil ich gegen Ende hin in meiner Verzweifelung immer zu T&E greife *g*, aber ich hoffe, es wird klar, worum es geht.

<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!--
// drag&drop from an example by Daniel Thoma dthoma@gmx.net (Public Domain?)
// see here for description:
// http://selfaktuell.teamone.de/tippstricks/dhtml/draganddrop/index.htm

var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;
var hand = null;

document.onmousemove = drag;
document.onmouseup = dragstop;

function dragstart(element) {
  dragobjekt = element;
  dragobjekt.style.background= "#00ff00";
  dragobjekt.style.zIndex = "9999";

dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}

function dragstop() {
  alert("hand =" + hand);
  dragobjekt.style.background= "#ff00ff";
  if(hand != null){
    hand.submit();
  }
  dragobjekt=null;
}

function drag(ereignis) {
  posx = ereignis.pageX;
  posy = ereignis.pageY;
  if(dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }
}

function raiseHand(target){
  hand = document.getElementById(target);
  alert("target =" + hand);
}

function sinkHand(){
  hand = null;
}

function alertme(){
  alert("submitting "" + dragobjekt.href + "" in "" + hand.id + """);
}

//-->
</script>
</head>
<body>
<!-- Problem: Element needs absolute positioning and a size different from 0 -->
<a onmousedown="dragstart(this)"
style="position:absolute;height:5ex;width:10em;background:#ff00ff;z-index:0;"
href="http://example.com/index.html">testlink</a>

<form
action="javascript:alertme()" id="formeins"
onmouseover="raiseHand("formeins")"
onmouseout="sinkHand()"
style="position:absolute;top:100px;left:200px;
       height:300px;width:300px;
       background-color:#0000ff;
       ">
</form><!-- nein, das Formular ist nur wg der Übersicht leer -->
</body>
</html>

Das es ein Link ist, ist noch ein Speziallfall, kann aber auch ein "normaler" Knoten sein, wenn muß.
Der Knoten soll also über das Formular gezogen werden können und wenn er dort "fallengelassen" wird, den Submit triggern und als Argument für "action" seinen Inhalt übergeben.

Ich hoffe, das ich nur einen blöden Denkfehler drin habe und es ohne Mozillapatch geht ;-)

BTW: bevor Fragen nach dem Warum kommen: das ist für ein IMAP Web-Frontend. Man soll so Mails einfach die Ordner wechseln lassen, oder auf den Drucker ziehen können. Der Code wird autogeneriert (mit RScheme, also kommt nicht mit PHP oder Perl Paketen ,-), muß also nicht sparsam sein. Allerdings sollte "Pixelschubserei" vermieden werden, es sollte schon ein flexibles Design sein. Die "px" Angaben oben habe ich nur aus Faulheit^WÜbersichtsgründen eingesetzt.

so short

Christoph Zurnieden