Drag and Drop...

Vos · 6. November 2006 um 16:24

Hi

Ich weiß nich ob ich ihr richtig bin, ich schreib mein problem mal ihrhinein da ich das Drag and Drop in JavaScript geschrieben hab.

Mein Problem, frage…

Ich hab ein Drag and Drop fenster und nun möchte ich, wenn der nutzter das objekt auf bestimmte Pixel oder in einem bestimmten Bereich ablegt,aktionen möglich sind… z.B das ein Popup fenster gehöffnet wird (als beispiel)

Ich hab schon bei google gesucht aber nix richtiges gefunden.

Ein weiter kleine frage die nicht hierreingehört aber ich gleich mitstellen wollte, ich hab mal irgendwo gelesen wie man mit CSS verschieden stylse der webseite machen kan ändern kan der nutzter diese
Beispiel firefox
Ansicht/Webseiten-Stil
finds aber nicht mehr standartmäsig steht dort Kein-Stil, Standart-Stil.

Danke für antworten

grüße

system · 6. November 2006 um 16:40

Zum Frag & Drop-Script: Mach mal ne Abfrage:

[php]var top = parseInt(document.getElementbyId(‚id_des_divs‘).style.top);
var left = parseInt(document.getElementbyId(‚id_des_divs‘).style.left)
if(top > 30 && top < 50){
//Der obere Rand der Box ist zwischen 30 und 50 pixel vom oberen Rand der Seite entfernt.
}
if(left > 50 && left < 200){
//Die Box ist zwischen 50 und 200 pixel vom linken Rand der Seite entfernt
}
if(top > 50 && top < 500 && left > 60 && left < 300){
//Die obere, linke Ecke des Divs ist in einer Box, die nach oben 50px platz hat, nach links 60px, 450px hoch und 240 px breit ist.
}[/php]Ich hoffe das Prinzip ist klar Funktioniert aber nur falls die Divs absolut positioniert sind (was ich annehme).

Vos · 6. November 2006 um 17:14

Nein das will nich so richtig…

ich hab auch noch eine else abfrage eingebaut aber der gibt nix wieder nochnichtmal den else befehl…

[php]
var dragobjekt = null;

var dragx = 10;
var dragy = 10;

var posx = 10;
var posy = 10;

function draginit() {

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

}

function dragstart(element) {

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

}

function dragstop() {

dragobjekt=null;

}

function drag(ereignis) {

posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
  dragobjekt.style.left = (posx - dragx) + "px";
  dragobjekt.style.top = (posy - dragy) + "px";
}

}

var top = parseInt(document.getElementbyId(‚dragobjekt‘).style.top);
var left = parseInt(document.getElementbyId(‚dragobjekt‘).style.left);
if(top1 > 0 && top1 < 50 && left1 > 0 && left1 < 250){
alert(„Hallo welt“);
}
else {
alert(„Hallo welt5“);
}

// hier das div…

[/php]

Ich weiß aber auch nicht genau was du mit ID des divs meins…
sry in Java kenn ich mich noch nich so gut aus…

grüße

edit…

das mit der if-abfrage is mir klar hätte gedacht das das schwerer wär …

system · 6. November 2006 um 17:24

Das ganze müsste eher so aussehen:

[php]
var dragobjekt = null;

var dragx = 10;
var dragy = 10;

var posx = 10;
var posy = 10;

function draginit() {

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

}

function dragstart(element) {

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

}

function drag(ereignis) {

posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
  dragobjekt.style.left = (posx - dragx) + "px";
  dragobjekt.style.top = (posy - dragy) + "px";
}

}

// hier das div…

[/php]

Habs nicht getestet, sollte aber so funktionieren. Wenn man nun ein Objekt bewegt, dann loslässt und es im entsprechenden Bereich ist, kommt ein alert-Fenster mit dem Text „Hallo Welt“, sonst kommt „Nicht im Bereich’“. Die Ecke oben links vom Bereich ist in der oberen Ecke der Seite und geht von da aus 50px nach unten und 250 px nach links.

Vos · 6. November 2006 um 17:35

Nein leider nicht…
Nun kann ich das objekt nur noch nehmen und verschieben aber leider nicht mehr ablegen. Weder if noch else werden angesprochen… gelesen

Ja wo der bereich nachher liegen soll hab ich schon verstanden…

grüße

system · 6. November 2006 um 17:42

OK, jetz hab ich es selber getestet, so funktionierts:

[html]

[/html]

Vos · 6. November 2006 um 17:52

Jo super vielen dank!

Vos · 7. November 2006 um 18:32

Nun ist mir noch eine frage zu dem Script aufgekommen. Wie kann ich das Drag and Drop so einstellen, das es nur in einem bestimmten bereich möglich ist also
top 500px bis 600px
left 500px bis 600px?

Mann könnte es mit einem Frame machen, gibt es auch eine Javascript lösung? da ich frames nicht besonders mag, sie werden bei mir immer unterschiedlich angezeigt! IE, Firefox!

ein weiterer gedankt war irgendwie mit einem DIV tag aber wie? So wie mit CSS und dan per ID den ganzen script einfügen?

Danke im vorraus!

Grüße

system · 7. November 2006 um 19:09

Also dann pakcste in die Abfrage halt die entsprechenden Werte rein. Oder willste es so machen, dass die Box entweder zwischen 500 und 600px vom oberen rand oder zwischen 500 und 600px vom linken rand entfernt ist?

Vos · 7. November 2006 um 19:17

Nein nein, ich will nicht das jetzt in dme bereich
top 500px bis 600px
left 500px bis 600px

eine aktion passiert das sondern nur in diesem bereich (ist jetzt klein ich weiß is ja nur beispiel) Das DRAG and DROP objetkt (der divcontainer) ist, funktioniert also das dort eine grenze ist und man das div nicht weiter ziehen kann…

sonst kan ich auch eine kleine skitze anfertigen

(Menü ect des Browsers)
(Bildschrim)
Bliblablu in HTML geschrieben

D&D = Drag and Drop
zu a) ihr is der bereich wo die Aktion passiert (aber das würde mir ja schon erklärt)danke nochmal

danke schonmal

system · 7. November 2006 um 19:25

Ahso, das geht natürlich auch

[html]

Vos · 7. November 2006 um 19:52

Vielen Dank erstmal
Jetzt noch eine kleine frage dan hab ich alles für den script, kann ich in diese „felder“ wo aktionen passieren oder halt wo das DIV sich drin bewegen kann,
diese felder mit CSS oda so bearbeiten? Also die Hintergrundfarbe rot machen, warum ich das wissen will? dan fällt mir die programmierung leichter da ich sofort sehe wo die bereiche liegen.

Ich verstehe das script nun wie es funktioniert das kann ich nachverfolgen, aber wie man auf die ganzen befehle kommt? Ich würd das nich hinbekommen immoment noch nich…
php kenn ich mich eigendlich ganz gut aus, kleine newsscripte, db gestützte sachen ect login mit account ect (das war mein erster script ohne hilfe, tuts ect lol)

Grüße und danke

system · 7. November 2006 um 19:59

Also ganze Felder sind es nicht, es sind unsichtbare Begrenzungen (wenn der Div zu weit verschoben werden soll, dann passiert nichts). Was du allerdings machen kannst, ist einen div auf die Seite zu legen der die entsprechende Position hat. Den kannste dann formatieren wie du willst.

Vos · 7. November 2006 um 20:02

okay vielen vielen dank

stimmt hab ich jetzt nicht weiter überlegt man kan ja einfach ein div mit den gleichen top, left und dan die höhe breite nehmen wie die begrenzungen.

grüße