HTML5 DnD - Warum funktioniert das Geisterbild nur nach dem Ziehen und Ablegen eines Elements wie erwartet?

compuphys

Ich versuche, ein pElement mit einem verschachtelten Element imgbeim Ziehen als Geisterbild anzuzeigen.

Ich bin nicht sicher, wie ich das debuggen soll, aber ich habe festgestellt, dass die Bilder nach dem Zwischenspeichern oder dem Ziehen und Ablegen irgendwo auf der Seite wie erwartet funktionieren. Ich habe hier eine MWE gemacht:

Das Smiley-Gesicht wird beim ersten Laden der Seite gezogen und zeigt das fehlerhafte Verhalten an - das Emoji wird beim Ziehen nicht angezeigt. Das traurige Gesicht wird gezogen, losgelassen und dann neu gerafft, was zu dem erwarteten Verhalten führt - das Emoji wird als Teil des Geisterbilds angezeigt . Dies gilt für alle Bilder.

Was ich versucht habe: Ich dachte, es könnte ein Problem mit der Art und Weise sein, wie die Seitenelemente geladen werden. Deshalb habe ich das Javascript an den unteren Rand des Körpers verschoben (um sicherzustellen, dass alle Elemente geladen werden, bevor das Skript ausgeführt wird). Dies löst das Problem nicht.

MWE-Code: Ich habe die Emojis von hier bekommen , aber ich denke, alle PNGs, die Sie auf Ihrem Computer herumliegen haben, werden dies reproduzieren.

index.php:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
  <h2>Order these items</h2>
  <div id="main_wrapper">
    <?php
      $json = json_decode(file_get_contents("image_set.json"), true);
      echo '<div id="home_container" ondrop="drop(event, this)" ondragover="allowDrop(event)">';
      $i = 0;
      foreach($json as $k => $v)  {
        echo '<p class="drag_item" draggable="true" ondragstart="drag(event)" id="drag'.$i.'"><img draggable="false" src="/images/'.$v['fn'].'" width=200 height=200>'.$v['text'].'</p>';
        $i++;
      }
      echo '</div>';
    ?>
    <div id="buffer" style="min-height:100px; width:100%;"></div>
    <div id="dropzone_wrapper">
    <?php
      for($i = 0; $i < count($json); $i++) {
        echo '<div class="dropzone" id="dropzone'.$i.'" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>';
        if($i < count($json)-1){echo '&lt;';}
      }
    ?>
    </div>
    <div id="msg"></div>
  </div>
  <script>
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    var dataList = ev.dataTransfer.items;
    dataList.add(ev.target.id, "text/plain");
  }

  function drop(ev, el) {
    ev.preventDefault();
    var data            = ev.dataTransfer.getData("text");
    var element_to_drop = document.getElementById(data);
    let droppable       = true;

    // If the dropzone already contains something (not text due to
    // spaces in markup being counted as text), don't allow 
    // another drop to occur.
    if (el.childNodes.length > 0) {
      el.childNodes.forEach(function(obj) {
        if(obj.nodeName != '#text') {
          droppable = false;
        }
      });
    }

    if(droppable)
      el.appendChild(document.getElementById(data));
  }

  function reset() {
    // Put all drag items back into the home container
    let home  = document.getElementById('home_container');
    let cards = document.querySelectorAll('.drag_item');

    for(var i = 0; i < cards.length; i++) {
      home.appendChild(cards[i]);
    }
  }
  </script>
</body>
</html>

image_set.json:

{
  "happy": {
    "fn":"happy.png",
    "text":"A happy face"
  },
  "sad": {
    "fn":"sad.png",
    "text":"A sad face"
  },
  "angry": {
    "fn":"angry.png",
    "text":"An angry face"
  },
  "confused": {
    "fn":"confused.png",
    "text":"A confused face"
  },
  "sleepy": {
    "fn":"sleepy.png",
    "text":"A sleepy face"
  }
}

stylesheet.css:

* {
  box-sizing:border-box;
  padding:0px;
  margin:0px;
  font-family:sans-serif;
  font-weight:100;
}

body {
  padding:20px;
}

h2 {
  padding:20px 0;
  font-size:4em;
}

p.drag_item {
  text-align:center;
  transition:0.5s;
  width:200px;
  height:200px;
}

.drag_item:hover {
  cursor:move;
}

#home_container, #dropzone_wrapper {
  min-height:200px;
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  margin:20px 0;
  align-items:center;
}

#dropzone_wrapper {
  font-size:3em;
}

#dropzone_wrapper p {
  font-size:initial;
}

#home_container {
  border:1px solid black;
  border-radius:8px;
  background-color:#e5e5e5;
}

#home_container p {
  width:200px;
  font-size:16px;
}

#msg {
  display:block;
  font-size:2.5em;
}

.dropzone {
  min-height:200px;
  width:200px;
  border:1px dashed black;
  background-color:#00a8bd;
}

Tamás Kriskó

Ich habe ein bisschen recherchiert, um das Problem zu finden. Das war etwas schwierig für mich, da Firefox der einzige Browser war, in dem das Geisterbild beim ersten Laden der Seite und beim ersten Ziehen nicht angezeigt wurde. Ich habe die NetworkRegisterkarte geöffnet und festgestellt, dass das Bild nur beim ersten Ziehen angefordert wird (was ich nicht wirklich verstehe, da die Bilder vollständig geladen wurden).

Wie auch immer, ich habe es endlich geschafft, dies zum Laufen zu bringen, indem ich das ziehbare Element in das Bild anstelle des Absatzes geändert habe.

index.php:

<div id="main_wrapper">
    <?php
        $json = json_decode(file_get_contents("image_set.json"), true);
        echo '<div id="home_container" ondrop="drop(event, this)" ondragover="allowDrop(event)">';
        $i = 0;
        foreach($json as $k => $v)  {
            echo '<p class="drag_item"><img ondragstart="drag(event)" id="drag'.$i.'" draggable="true" src="images/'.$v['fn'].'" width=200 height=200>'.$v['text'].'</p>';
            $i++;
        }
        echo '</div>';
    ?>
    <div id="buffer" style="min-height:100px; width:100%;"></div>
    <div id="dropzone_wrapper">
        <?php
            for($i = 0; $i < count($json); $i++) {
                echo '<div class="dropzone" id="dropzone'.$i.'" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>';
                if($i < count($json)-1){echo '&lt;';}
            }
        ?>
    </div>
    <div id="msg"></div>
</div>

JS:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    // get the cursor position relative to the element
    var x = (ev.pageX - ev.target.offsetLeft) + document.body.scrollLeft;
    var y = (ev.pageY - ev.target.offsetTop) + document.body.scrollTop;

    ev.dataTransfer.setData("text", ev.target.id);

    // set the parent element (the paragraph) as the custom ghost image and set the position of the ghost image (x, y)
    ev.dataTransfer.setDragImage(ev.target.parentElement, x, y);
  }

function drop(ev, el) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var element_to_drop = document.getElementById(data);
    let droppable = true;

    if (el.childNodes.length > 0) {
        el.childNodes.forEach(function(obj) {
            if(obj.nodeName != '#text') {
                droppable = false;
            }
        });
    }

    if(droppable)
        el.appendChild(document.getElementById(data).parentElement);
}

function reset() {
    let home = document.getElementById('home_container');
    let cards = document.querySelectorAll('.drag_item');

    for(var i = 0; i < cards.length; i++) {
        home.appendChild(cards[i]);
    }
}

Dies funktioniert ziemlich gut in: Chrome, Edge, IE 11

HINWEIS: Dies funktioniert nur in Firefox einwandfrei (der Absatztext wird nur in diesem Browser angezeigt).

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2021-01-24

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:Zuordnung zur Druckfunktion

TOP Liste

Artikel

HTML5 DnD - Warum funktioniert das Geisterbild nur nach dem Ziehen und Ablegen eines Elements wie erwartet?

HTML5 DnD - Warum funktioniert das Geisterbild nur nach dem Ziehen und Ablegen eines Elements wie erwartet?

So verschieben Sie ein Bild in Flutter/Dart mit einem Draggable

Unity Build-Fehler: Der Name 'EditorUtility' ist im aktuellen Kontext nicht vorhanden

TypeAhead.js zeigt keine Ausgangsschienen an?

Deklarieren einer nicht initialisierten Variablen in der Klassendefinition in Python

Wie kann ich eine verschachtelte Schleife mit lapply in R ersetzen?

Interpolieren Sie mit Python die 2D-Matrix entlang der Spalten

spring-data-jpa: ORA-01795: Die maximale Anzahl von Ausdrücken in einer Liste beträgt 1000

Warum funktioniert Phantomjs nicht mit dieser Site?

numpy: Berechnen Sie die Ableitung der Softmax-Funktion

Wie vermeide ich, dass die gesamte App neu geladen wird, wenn Nav.Link von React-Bootstrap verwendet wird?

MongoDB eingebettetes Dokument unterscheiden und filtern

Warum funktioniert das Umgebungslicht in diesem Beispiel nicht?

Wie aktualisiere ich ein Feld in einer Raumdatenbank mit einem Repository und einem Ansichtsmodell?

Python gibt einen Fehler aus, dass eine Datei nicht vorhanden ist, wenn dies eindeutig der Fall ist

Aktualisieren des Werts im Json-Objekt in Python

Wie verwende ich Format-Table ohne Abschneiden von Werten?

Kivy: Machen Sie Scatter gleich groß wie das untergeordnete Etikett oder Bild

So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

So vergleichen Sie Werte in verschiedenen Objekten jq

Teilen Sie die Zeichenfolge durch (') und Leerzeichen, aber lassen Sie alle Leerzeichen zwischen zwei aufeinander folgenden (')

Überprüfen Sie, ob der ausgewählte Wert 'YES' ist, wenn ja, aktivieren Sie ein Steuerelement mit Javascript