nicht angemeldet
Hallo,
"das Problem" ist, daß es sicherlich jede menge Arten Drag-and-Drop zu programieren gibt. Meine unten aufgeführte ist nur sehr rudimentär, aber sie soll ja auch nur als Gerüst dienen. Hinzu kommt die Schwierigkeit des IE (jawohl, nicht NS, IE!), daß man bei einem zu zügigen Bewegen der Maus gerne den zu bewegenden Layer "überholt" und dann die ganze Steuerung durcheinander kommt. Also einfach "langsam" das Fenster bewegen ;-) ich sollte ja auch kein Drag-and-drop zeigen, sondern wie man nur einen anklickbaren Bereich definiert.
Ich poste den Code zweimal, einmal ist das ganze Div anklickbar (normal-Situation).... dazu habe ich die Größe des Div-Bereiches (eingestellt mit Clip) im JS-Programm hardgecodet. Bei einem Klick mit der Maus liest das Prg die Koordinaten des Layers aus und vergleicht die aktuelle Mausposition damit. (die Stelle habe ich mit einem Kommentar kenntlich gemacht).... als untere Grenze nehme ich die y-Position des Layers plus die Höhe....
Im zweiten Script addiere ich einfach anstelle der hart-gecodeten Höhe (habe gerade nicht herausgefunden, wie man die Höhe dynamisch ausliest ;-) ) die gewünschte Höhe der Anklickbaren Leiste, hier 30 Pixel.... entspricht in etwas der Höhe der ersten blauen Tabellenreihe. Ich habe nur diese Stelle nochmal gepostet, damit dieser Text nicht zu lang wird... (Ach ja, der "Stil" entspricht meiner Rechtschreibqualitäten....aber es liest ja eh keiner mehr mit ;-))
Chräcker
<img src="http://homepages.compuserve.de/ackheller/stempel/grafiken/logo.gif" alt="">http://www.chraecker.de/stempel
---------------
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function init()
{
ns = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;
layerbreite=200;
layerhoehe=200;
gedrueckt=0;
document.onmousedown = mausrunter;
document.onmouseup = mausrauf;
document.onmousemove = mausbewegt;
if (ns)
document.captureEvents(Event.MOUSEDOWN Event.MOUSEMOVE Event.MOUSEUP)
}
function mausbewegt(e){
if (gedrueckt){
if (ns) {
var x=e.pageX; var y=e.pageY;
layerx=document.fenster.left;
layery=document.fenster.top
}
else {
var x=event.x; var y=event.y+document.body.scrollTop;
ende=document.all.fenster.style.left.search(/p/);
layerx=parseInt(document.all.fenster.style.left.slice(0,ende));
ende=document.all.fenster.style.top.search(/p/);
layery=parseInt(document.all.fenster.style.top.slice(0,ende));
}
<!-- hier wird getestet, ob die Maus an der richtigen Position gedrückt wurde....
(sonst bewegt sich eben nichts) //-->
if (x>layerx && x<layerx+layerbreite && y>layery && y<layery+layerhoehe){
<!-- hier wurde getestet, ob die Maus an der richtigen Position gedrückt wurde.... //-->
if (ns) {
document.fenster.top = y-20;
document.fenster.left = x-(layerbreite/2);}
else {
document.all.fenster.style.top = y-20;
document.all.fenster.style.left = x-(layerbreite/2);
}
}
}
}
function mausrunter(e){
gedrueckt=1;
}
function mausrauf(e){
gedrueckt=0;
}
//-->
</script>
</head>
<body onLoad="init()" text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="fenster" style="position:absolute; top: 128px; left: 130px; clip:rect(0,200,200,0)">
<TABLE height="200" width="200" >
<TR height="20" bgcolor="#00FFFF"><TD><BR></TD></TR>
<TR bgcolor="#C0C0C0"> <TD><BR><BR><BR><BR><BR><BR><BR><BR><BR></TD></TR>
</TABLE>
</DIV>
</body>
</html>
------------
und jetzt die ausgetauschte Mauskontrolle:
<!-- hier wird getestet, ob die Maus an der richtigen Position gedrückt wurde.... //-->
if (x>layerx && x<layerx+layerbreite && y>layery && y<layery+30){
<!-- hier wurde getestet, ob die Maus an der richtigen Position gedrückt wurde.... //-->