Werte ermitteln (DIV position und mit <form> Speichern!

H

harderph

Erfahrenes Mitglied
ich noch mal!

Ichhabe ein script gefunden wo sich die <div> mit der maus verschieben lassen! Jetzt möchte ich die neuen xy koordinaten speichern in die datenbank! Aber wie bekomme ich die werte raus bzw in ein <input typ=hidden> rein

Hiermal das script was ich gefunden habe!
HTML: 
<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4

//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;

// Mausposition
var posx = 0;
var posy = 0;


function draginit() {
 // Initialisierung der Überwachung der Events

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


function dragstart(element) {
   //Wird aufgerufen, wenn ein Objekt bewegt werden soll.

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


function dragstop() {
  //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.

  dragobjekt=null;
}


function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

  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";
  }
}
//-->
</script>
</head>
<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>
<div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00"> </div>
</body>
</html>
ich würde ja tippen es die werte "dragobjekt.style.left " und "dragobjekt.style.top" mit id des div aber ich weiss nihct wie ich das realesieren soll! Und von der datenbank soll es nihct mehr veränderbar sein! Also user geht in sein account ändert das layout seines profils und speichert es ab in die DB! Wenn ein gast profil anguckt soll er nichts bewegen können!
 
Zuletzt bearbeitet:
Du könntest den Wert gleich in der Funktion mit setzen, welche für das Verschieben sorgt:
Code: 
function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    document.formularname.inputname_x.value=dragobjekt.style.left = (posx - dragx) + "px";
    document.formularname.inputname_y.value=dragobjekt.style.top = (posy - dragy) + "px";
  }
}
 
Geht nicht! kommt ein fehler Dokument hat wert null oder kein objekt!!

ichhabe ein input feld erstellt mit dem namen x und y

Code: 
<input type="text" name="x"> <input type="text" name="y">
Oder hab ich was falsch gemacht!
 
Ok wie doof jetzt habe ich es und es geht

Code: 
function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    document.formularname.x.value = dragobjekt.style.left = (posx - dragx) + "px";
    document.formularname.y.value = dragobjekt.style.top = (posy - dragy) + "px";
  }
}
//-->
</script>
</head>
<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>
<div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00"> </div>

<label>
 <form name="formularname">
    <center>
      <table>
        <tr>
          <td align="right">name = </td>
          <td><input name="NAME" type="text" size="12"></td>
          <td align="right">&nbsp;&nbsp;x = </td>
          <td><input name="x" type="text" size="12"></td>
          <td align="right">&nbsp;&nbsp;y = </td>
          <td><input name="y" type="text" size="12"></td>
        </tr>
      </table>
    </center>
  </form>
 
formularname sollte der Name des Formulars und inputname_x / inputname_y die Namen der Inputs sein....falls nicht, musst du das entsprechend anpassen.
 
kann man eigendlich die bewegbaren objekete einsperren
ich habe vor ein Layoutmanager zu basteln und die Opjekte sollen nicht über das ganze ducument verteilt werden sondern in einen container! Wenn ich ein linkes und rechtes menü habe und in der mitte den Inhalt sollen die Objekte nur im inhalt verschiebar sein! damit möchte ich das die seite profil anzeige die breite der Website (900px) hat , sol eben nicht überbreite haben! Nach unten is es eigendlich egal!
Hat jemand eine idee
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück