nicht angemeldet
Drag and Drop
hallo Leute ich hab da folgendes Problem:
Normales Drag and drop ist soweit kein problem das prob ist nun, dass man egal wo man im layer hinklickt das Ding ziehen kann. Das möchte ich aber nicht.
Ich möchte z.B. ne Dragbar machen, und nebendran noch text oder bilder, wenn man aber auf die Bilder oder den Text klickt, soll man das ganze nich ziehen können, sondern eben nur wenn man auf die Dragbar klickt...
comprende? ;)
Ich hab schon im Archiv gesucht, bin aber nich fündig geworden...
Danke für Eure Hilfe
Flo
-
Hallo Flo,
dazu brauchst Du nur Dir die Koordinaten des Layers auslesen bzw mitschreiben.... bei einem mouseklick über dem Layer wird eine "Mauskoordinaten-test-function" angesprungen, die nun testet, ob die aktuellen Mauskoordinaten sich höchsten x und y Pixel von left und top des Layers entfernt sind. x ist die Breite Deines drag-anklick-bereiches, y ist die Höhe Deines drag-anklick-bereiches.
Befindet sich der "klick-mich-an-Drag"-Bereich nicht am oberen Layerrand, must Du den Abstand zu den Rändern noch dazu addieren.
Wurde die Maus innerhalb dieses Bereiches geklickt, darf der Layer mitwandern. Ansonsten eben nicht...
Chräcker
<img src="http://homepages.compuserve.de/ackheller/stempel/grafiken/logo.gif" alt="">http://www.chraecker.de/stempel
-
Hallo Flo,
dazu brauchst Du nur Dir die Koordinaten des Layers auslesen bzw mitschreiben.... bei einem mouseklick über dem Layer wird eine "Mauskoordinaten-test-function" angesprungen, die nun testet, ob die aktuellen Mauskoordinaten sich höchsten x und y Pixel von left und top des Layers entfernt sind. x ist die Breite Deines drag-anklick-bereiches, y ist die Höhe Deines drag-anklick-bereiches.
Befindet sich der "klick-mich-an-Drag"-Bereich nicht am oberen Layerrand, must Du den Abstand zu den Rändern noch dazu addieren.
Wurde die Maus innerhalb dieses Bereiches geklickt, darf der Layer mitwandern. Ansonsten eben nicht...
Chräcker
thx a lot, werd ich gleich mal ausprobieren
-
öhm
gibts da vielleicht irgendwo ein Code Beispiel??
das wär toll!thx
MfG
Flo
-
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.... //-->
-
thx a lot, das is echt klasse von dir!
MfG
Flo
-
-
-
-