Ankündigung

Einklappen
Keine Ankündigung bisher.

Drag and Drop

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Drag and Drop

    Hallo, ich übe und teste gerade mit den Möglichkeiten von Drag & Drop herum (https://wiki.selfhtml.org/wiki/JavaScript/Drag_%26_Drop). Das Ziel ist es, ein Element entweder in "example1" oder "example2" zu ziehen, inkl. den values aus den entsprechenden hidden fields.
    Hat jemand ev. ein Tipp für mich, wie ich das angehen soll?

    HTML-Code:
    <div id="box1" class="boxes" draggable="true" ondragstart="drag(event)" style="width: 100px; height: 100px; border:1px solid black">
        <input type="hidden" id="dragA" class="item" value="1">    
    
            <img src="https://wiki-test.selfhtml.org/images/6/63/Selfhtml-logo-Weihnachten-2006_patrick_rudolph.gif"
    alt="Logo-Entwurf von Patrick Rudolph">
    
            </div>
    
        <div id="box2" class="boxes" draggable="true" ondragstart="drag(event)" style="width: 100px; height: 100px; border:1px solid black">
            <input type="hidden" id="dragB" class="item" value="2">
    
            <img src="https://wiki-test.selfhtml.org/images/d/d7/Selfhtml-logo-Weihnachten-2006-ani_kirsten-evers.gif"
    alt="Logo-Entwurf von Kirsten Evers">
    
        </div>
    
    div class="ziel" ondrop="drop(event)" ondragover="allowDrop(event)" id="example1"></div>
        <div class="ziel" ondrop="drop(event)" ondragover="allowDrop(event)" id="example2"></div>
    Code:
    <script src="../js/jquery.min.js"></script>    
    
    
    <script>
    function allowDrop(ev) {
        ev.preventDefault();
    }
    
    function drag(ev) {
        ev.dataTransfer.setData('text', ev.target.id);
    
    }
    
    function drop(ev) {
        ev.preventDefault();
        var source = ev.dataTransfer.getData('text');
    
        ev.target.appendChild(document.getElementById(source));
        var goal = ev.target.id;
    
    
        $.ajax({
      type:'post',
      url:'test-store.php',
      data:{
       data_source:source,
       data_goal:goal
      },
      success:function(response) {
       alert(response);
       }
    
     });
    
    }
    
    </script>
    Bin dankbar für hilfreiche Tipps

  • #2
    Da du sowieso schon jQuery benutzt, kannst du auch damit arbeiten
    https://jqueryui.com/draggable/
    https://jqueryui.com/droppable/

    Events würde ich mit addEventListener machen und nicht den Inline Kram.
    Das Element example1 ist kaputt , da fehlt ein <
    Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
    Erreichbar in mein Javascript-Forum und in Facebook-Chat

    Kommentar


    • #3
      Zitat von Saturnus Beitrag anzeigen
      Hallo, ich übe und teste gerade mit den Möglichkeiten von Drag & Drop herum (https://wiki.selfhtml.org/wiki/JavaScript/Drag_%26_Drop). Das Ziel ist es, ein Element entweder in "example1" oder "example2" zu ziehen, inkl. den values aus den entsprechenden hidden fields.
      Hat jemand ev. ein Tipp für mich, wie ich das angehen soll?
      Ein Blick in die Fehlerconsole des Browsers kann (v.a. beim Schreiben von Javascript) nie schaden, so auch hier: dein Code meldet in der appendChild-Zeile einen Fehler da source nicht das enthält was du erwartest. Eine Ausgabe des Wertes (am besten über console.log()) entlarvt dass da die URL des Bildes drinsteht - es wird also nicht das div verschoben sondern das Bild. Die Lösung ist ganz einfach: verpassen den Bildern ein draggable="false", dann wird wirklich das div verschoben und landet wie gewünscht im Ziel.

      Aber beachte den Hinweis in der Einleitung des Artikels bei SELFHTML: auf mobilen Geräten funktioniert das ganze nicht!

      Zitat von basti1012 Beitrag anzeigen
      Da du sowieso schon jQuery benutzt, kannst du auch damit arbeiten
      Nein, das ist Unsinn. jQuery ist heutzutage nicht mehr nötig und sollte imho in neue Projekte garnicht erst eingebaut werden - auch hier lässt sich jQuery problemlos rauswerfen, fetch existiert.

      Kommentar


      • #4
        Zitat von tk1234 Beitrag anzeigen
        Nein, das ist Unsinn. jQuery ist heutzutage nicht mehr nötig und sollte imho in neue Projekte garnicht erst eingebaut werden - auch hier lässt sich jQuery problemlos rauswerfen, fetch existiert.
        Warum nicht nutzen, wenn es doch sowieso schon eingebunden ist?
        Das musst mir mal erklären bitte.
        Dass es ohne geht, ist mir auch klar.
        Kommt vielleicht auch darauf an wie der Rest der Webseite aussieht.
        Ist es nur das, was er gezeigt hat , dann weg damit.
        Wäre jQuery nicht schon in Benutzung, dann hätte ich das auch nicht verlinkt.
        Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
        Erreichbar in mein Javascript-Forum und in Facebook-Chat

        Kommentar


        • #5
          Zitat von basti1012 Beitrag anzeigen
          Warum nicht nutzen, wenn es doch sowieso schon eingebunden ist?
          Wieso die Abhängigkeit von jQuery noch erhöhen - ich würde neue Sachen immer ohne jQuery lösen, auch wenn das noch eingebunden wird (und die restlichen Sachen nach und nach rauswerfen). Das Script vom OP scheint ja auch gerade im Aufbau zu sein, da lässt sich jQuery ja noch problemlos rauswerfen.

          Aber vor allem: überhaupt nicht auf das Script und dessen Fehler eingehen und stattdessen jQuery empfehlen ist irgendwo ziemlicher Käse …

          Kommentar

          Lädt...
          X