Position eines DragElements auf dem Screen speichern

Kristik47 · 11. April 2020

Moin,

arbeite zur Zeit an einem Handy-System. Das Handy ist bereits beweglich, wonach ich allerdings suche,

ist die Möglichkeit, die Position auch so zu speichern, wie das Handy möglicherweise verschoben wurde und

beim nächsten Aufruf des Handys wieder dort auftauchen zu lassen, wo die Position abgespeichert wurde.

Hier der Code meines leeren Divs und der darunter liegenden JavaScript-Funktion. Der Speichercode,

wenn man ihn so nennen kann, ist ganz unten entlang der Funktion zu finden.

Code

<body style="overflow: hidden;">

        <div id="mobile">

        </div>
    <script>
    //Make the DIV element draggagle:
    dragElement(document.getElementById("mobile"));

    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (document.getElementById(elmnt.id + "mobile")) {
        /* if present, the header is where you move the DIV from:*/
        document.getElementById(elmnt.id + "mobile").onmousedown = dragMouseDown;
      } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
      }

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
      }

      function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
      }
      
      function saveDragElement() {
        /* Speichert die Position des verschobenen Handys*/
      }
    }
    </script>
    </body>

Alles anzeigen

Hier die CSS-Datei mit #mobile

Code

#mobile {
      position: absolute;
      z-index: 9;
        width: 240px;
        height: 430px;
        background-color: grey;
        border-radius: 6px;
   }

Mit freundlichen Grüßen

Kristik47

LeonMrBonnie · 11. April 2020

Wenn du die WebView nur versteckst, dann sollte die Position des Handys doch auch gespeichert bleiben.

Oder willst du es permanent speichern?

Dann kannst du doch einfach beim speichern den Offset top und den Offset left speichern, und sobald das Handy geöffnet wirst, kannst du den Offset dann wieder auf das Element anwenden.

Welcher Multiplayer Mod wird verwendet? Dann kann ich dir genauer helfen

Kristik47 · 11. April 2020

RageMP wird verwendet. Es soll jede neue Position permanent speichern, solange es nicht wieder

verschoben wird.

Beispiel: Person A verschiebt das Teil, schließt iPhone. Öffnet er es wieder, so soll das Teil wieder dort auftauchen, wo es gespeichert wurde.

Und so immer wieder. Neue Position = wieder abspeichern.

Es ist wohl eher treffender zu sagen, dass die letzte Position immer gespeichert und aufgerufen werden soll beim Wiederöffnen des Handys.

LeonMrBonnie

LeonMrBonnie · 11. April 2020

JavaScript

//Make the DIV element draggagle:
let el = document.getElementById("mobile");
dragElement();

let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
let offsetTop = 0, offsetLeft = 0;
function dragElement() {
    if (document.getElementById(el.id + "mobile")) {
      /* if present, the header is where you move the DIV from:*/
      document.getElementById(el.id + "mobile").onmousedown = dragMouseDown;
    } else {
      /* otherwise, move the DIV from anywhere inside the DIV:*/
      el.onmousedown = dragMouseDown;
    }
}
function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
}
function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    offsetTop = offsetTop - pos2;
    offsetLeft = offsetLeft - pos1;

    el.style.top = offsetTop + "px";
    el.style.left = offsetLeft + "px";
}
function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
}

function loadDragElement(top, left) {
    offsetTop = top;
    offsetLeft = left;

    el.style.top = offsetTop + "px";
    el.style.left = offsetLeft + "px";
}

function saveDragElement() {
    /* Speichert die Position des verschobenen Handys*/
    mp.trigger("saveHandyOffset", offsetTop, offsetLeft);
}

Alles anzeigen

Clientside:

JavaScript

mp.events.add("saveHandyOffset", (top, left) => {
    // Hier kannst du dann den Offset z.B. an den Server senden und in der Datenbank speichern
});

Wenn du dich einloggst, musst du dann halt den Offset aus der Datenbank laden und speichern. Sobald du das Handy öffnest kannst du dann einfach im CEF die loadDragElement Funktion mit den beiden Offsets aufrufen, und dann sollte es wieder da sein wo es vorher war.

Kristik47 · 11. April 2020

Wild. Danke vielmals.

Position eines DragElements auf dem Screen speichern

dennismitzwein 9. November 2020

breadfish.de 12. März 2022