• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Drag and Drop...

Status
Für weitere Antworten geschlossen.
V

Vos

Neues Mitglied
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
 
Werbung:
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.
}
Ich hoffe das Prinzip ist klar :-) Funktioniert aber nur falls die Divs absolut positioniert sind (was ich annehme).
 
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...

 <div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>

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 ...
 
Werbung:
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 dragstop() {
  if(dragobjekt != null){
    var top = parseInt(document.getElementbyId(dragobjekt).style.top);
    var left = parseInt(document.getElementbyId(dragobjekt).style.left);
    if(top > 0 && top < 50 && left > 0 && left < 250){
      alert("Hallo welt");
    } else {
      alert("Nicht mit Bereich");
    } 
  }
  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";
    }
  }

// hier das div...

 <div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>

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.
 
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
 
OK, jetz hab ich es selber getestet, so funktionierts:

HTML: 
<html>
<head>
<script type="text/javascript">
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;
draginit();
  }


  function dragstop() {
  if(dragobjekt != null){
    var top = parseInt(dragobjekt.style.top);
    var left = parseInt(dragobjekt.style.left);
    dragobjekt=null;
    if(top > 0 && top < 50 && left > 0 && left < 250){
      alert("Hallo welt");
    } else {
      alert("Nicht mit Bereich");
    }
  }
  }


  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...
</script>
</head>
<body>
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div> 
</body>
</html>
 
Werbung:
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
 
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?
 
Werbung:
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
| |-------------------------|
| |(Hierdrin kan das D&D sich bewegen)
| |
| |
| | |-----|
| | | a) |
| | |-----|
| |
| | ------------------------|
|
|
------------------------------------------------------

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
 
Zuletzt bearbeitet:
Ahso, das geht natürlich auch

HTML: 
<html>
<head>
<script type="text/javascript">
<!--
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;
draginit();
  }


  function dragstop() {
  if(dragobjekt != null){
    var top = parseInt(dragobjekt.style.top);
    var left = parseInt(dragobjekt.style.left);
    dragobjekt=null;
/*    if(top > 0 && top < 50 && left > 0 && left < 250){
      alert("Hallo welt");
    } else {
      alert("Nicht mit Bereich");
    } */
  }
  }


  function drag(ereignis) {

    posx = document.all ? window.event.clientX : ereignis.pageX;
    posy = document.all ? window.event.clientY : ereignis.pageY;
    if(dragobjekt != null) {
     var tmpx = posx - dragx;
     var tmpy = posy - dragy;
// hier ist die begrnzung nach links/rechts
     if(tmpx > 10 && tmpx < 500){
      dragobjekt.style.left = tmpx + "px";
     }
//hier ist die begrenzung nach oben/unten
     if(tmpy > 50 && tmpy < 300){
      dragobjekt.style.top = tmpy + "px";
     }
    }
  }

// hier das div...
-->
</script>
</head>
<body>
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div> 
</body>
</html>
Ich hab einen Kommentar an die wichtige Stelle gepackt.
 
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
 
Werbung:
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.
 
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
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben