One place for hosting & domains

      Vanilla

      Wie man Drag & Drop-Elemente mit Vanilla JavaScript und HTML erstellt


      Einführung

      Drag & Drop ist eine übliche Benutzerinteraktion, die Sie in vielen grafischen Benutzeroberflächen finden.

      Es gibt bereits vorhandene JavaScript-Bibliotheken zum Hinzufügen einer Drag-and-Drop-Funktion zu Ihrer Anwendung. Es kann jedoch Situationen geben, in denen eine Bibliothek nicht verfügbar ist oder einen Overhead oder eine Abhängigkeit mit sich bringt, die Ihr Projekt nicht benötigt.  In diesen Situationen kann die Kenntnis der APIs, die Ihnen in modernen Webbrowsern zur Verfügung stehen, alternative Lösungen bieten.

      Die HTML Drag and Drop-API stützt sich auf das Ereignismodell des DOM, um Informationen darüber zu erhalten, was gezogen oder fallen gelassen wird, und um dieses Element per Drag and Drop zu aktualisieren.  Mit JavaScript-Ereignishandlern können Sie jedes beliebige Element in ein ziehbares Element oder in ein Element, in das abgelegt werden kann, umwandeln.

      In diesem Tutorial werden wir ein Drag-and-Drop-Beispiel mit der HTML-Drag-and-Drop-API mit Vanille-JavaScript erstellen, um die Event-Handler zu verwenden.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      • Einen modernen Webbrowser, der die Drag and Drop API unterstützt (Chrome Firefox 3.5+, Safari 3.1+, Edge 18+).

      Schritt 1 — Erstellen des Projekts und der Ersteinrichtung

      Unser Projekt wird aus einem Container mit zwei Arten von untergeordneten Elementen bestehen:

      • Untergeordnete Elemente, die Sie ziehen können
      • Untergeordnete Elemente, in die Elemente eingefügt werden können

      Öffnen Sie zunächst Ihr Terminalfenster und erstellen Sie ein neues Projektverzeichnis:

      • mkdir drag-and-drop-example

      Navigieren Sie dann zu diesem Verzeichnis:

      Erstellen Sie dann eine index.html - Datei in diesem Verzeichnis:

      Als Nächstes fügen Sie einen Boilerplate-Code für eine HTML-Webseite hinzu:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Und zwischen den Tags <body> fügen Sie Ihr draggable und Ihr dropzone (Ablageziel) hinzu:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Speichern und schließen Sie die Datei. Erstellen Sie dann eine Datei style.css:

      Als nächstes fügen Sie Stile für die Elemente in unserer Datei index.html hinzu:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Dadurch wird der Anwendung etwas Formatierung hinzugefügt. Jetzt können Sie index.html im Browser anzeigen und beobachten, dass dies ein draggable <div> und ein dropzone <div> produziert.

      Screenshot von verschiebbaren und Dropzone-Divs

      Als Nächstes erstellen wir explizit die erste <div> durch Hinzufügen des Attributs draggable .

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Speichern und schließen Sie die Datei.

      Sehen Sie sich schließlich index.html erneut im Browser an.  Wenn wir auf das draggable<<div> klicken und es über den Bildschirm ziehen, sollte es eine visuelle Anzeige der Bewegung geben.

      Der Standardwert für das Attribut draggable ist auto. Das bedeutet, ob das Element ziehbar ist, wird durch das Standardverhalten Ihres Browsers bestimmt.  Typischerweise bedeutet dies, dass Textauswahlen, Bilder und Links gezogen werden können, ohne dass draggable =„wahr" angegeben sein muss.

      Sie haben nun eine HTML-Datei mit einem ziehbaren Element. Wir werden uns mit der Aufnahme von Ereignishandlern befassen.

      Schritt 2 — Handhaben von Drag-and-Drop-Ereignissen mit JavaScript

      Wenn wir jetzt die Maus loslassen, während wir das verschiebbare Element ziehen, geschieht nichts. Um eine Aktion beim Ziehen oder Ablegen von DOM-Elementen auszulösen, müssen wir die Drag & Drop-API verwenden:

      • ondragstart: Dieser Ereignishandler wird an unser ^>draggable<^>Element angehängt und ausgelöst, wenn ein dragstart-Ereignis eintritt.
      • ondragover: Dieser Ereignishandler wird an unser ^>dropzone<^>-Element angehängt und ausgelöst, wenn ein dragover-Ereignis eintritt.
      • ondrop: Dieser Ereignishandler wird an unser dropzone-Element angehängt und ausgelöst, wenn ein drop-Ereignis eintritt.

      Anmerkung: Insgesamt gibt es acht Ereignishandler: ondragondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart und ondrop. Für unser Beispiel benötigen wir sie nicht alle.

      Lassen Sie uns zunächst eine neue Datei script.js in unserer index.html referenzieren:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Erstellen Sie als Nächstes eine neue Datei script.js:

      Das DataTransfer-Objekt verfolgt die Informationen, die sich auf das aktuelle Drag beziehen.  Um unser Element per Drag and Drop zu aktualisieren, müssen wir direkt auf das DataTransfer-Objekt zugreifen. Zu diesem Zweck können wir die Eigenschaft dataTransfer aus dem DragEvent des DOM-Elements auswählen.

      Anmerkung: Das DataTransfer-Objekt kann Informationen für mehrere Elemente verfolgen, die gleichzeitig gezogen werden. Wir werden uns beispielsweise auf das Ziehen eines Elements konzentrieren.

      Die setData-Methode des Objekts dataTransfer kann verwendet werden, um die zu ziehenden Statusinformationen für Ihr aktuell gezogenes Element festzulegen. Dazu sind zwei Parameter erforderlich:

      • Einen String, der das Format des zweiten Parameters deklariert
      • die tatsächlichen übergebenen Daten

      Unser Ziel ist es, unser Element draggable in ein neues übergeordnetes Element zu verschieben. Wir müssen in der Lage sein, unser draggable-Element mit einer eindeutigen ID auszuwählen. Wir können die ID des gezogenen Elements mit der setData-Methode setzen, damit es später verwendet werden kann.

      Schauen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Anmerkung: Internet Explorer 9 bis 11 hat laut Angaben Probleme mit der Verwendung von „text/plain“. Das Format muss für diesen Browser „text“ sein.

      Um das CSS-Styling des gezogenen Elements zu aktualisieren, können wir auf seine Stile zugreifen, indem wir erneut das DOM-Ereignis verwenden und die gewünschten Stile für die currentTarget festlegen.

      Ergänzen wir unsere Funktion und ändern die Hintergrundfarbe zu gelb:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Anmerkung: Alle Stile, die Sie ändern, müssen beim Ablegen erneut manuell aktualisiert werden, wenn Sie Stile nur zum Ziehen wünschen.  Wenn Sie etwas ändern, sobald das Ziehen beginnt, behält das gezogene Element diese neue Gestaltung bei, es sei denn, Sie ändern es wieder zurück.

      Jetzt haben wir unsere JavaScript-Funktion für den Start des Ziehens.

      Wir können ondragstart dem Element draggable in index.html hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Sehen Sie sich index.html in Ihrem Browser an. Wenn Sie versuchen, Ihren Artikel jetzt zu ziehen, wird das in unserer Funktion deklarierte Styling angewendet:

      Animiertes Gif, das ein Element darstellt, das gezogen, aber nicht fallen gelassen wird

      Es passiert jedoch nichts, wenn Sie Ihren Klick loslassen.

      Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondragover.

      Das Standard-Drop-Verhalten für bestimmte DOM-Elemente wie <div>s in Browsern akzeptiert normalerweise kein Ablegen.  Dieses Verhalten wird das Verhalten abfangen, das wir implementieren möchten. Um sicherzustellen, das wir das gewünschte Ablageverhalten erhalten, wenden wir preventDefault an.

      Sehen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von preventDefault. Fügen Sie diesen Code am Ende der Datei hinzu:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Jetzt können wir unserem Element dropzone in index.html ondragover hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      Zu diesem Zeitpunkt haben wir immer noch keinen Code geschrieben, der das tatsächliche Ablegen behandelt.  Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondrop.

      Lassen Sie uns unsere Datei script.js erneut besuchen und eine neue Funktion erstellen.

      Wir können auf die Daten verweisen, die wir früher mit der setData-Methode des dataTransfer-Objekts gespeichert haben.  Wir werden die getData-Methode des dataTransfer-Objekts verwenden.  Die Daten, die wir gesetzt haben, waren die ID, und das ist es, was uns zurückgegeben wird:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Wählen Sie unser draggable Element mit der von uns abgerufenen ID aus:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Wählen Sie unser Element dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Fügen Sie unser Element draggable an das Element dropzone an:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Setzen Sie unser dataTransfer-Objekt zurück:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Jetzt können wir unserem Element dropzone in index.html ondrop hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Sobald das erledigt ist, haben wir eine vollständige Drag-and-Drop-Funktion. Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie das Element draggable zu dropzone.

      Animiertes Gif, das ein Element darstellt, das per Drag & Drop in ein Drop-Ziel gezogen wird

      Unser Beispiel behandelt das Szenario eines einzelnen verschiebbaren Elements und eines einzelnen Ablageziels.  Sie können mehrere verschiebbare Elemente und mehrere Ablageziele haben und sie an alle anderen Drag & Drop-API-Ereignishandler anpassen. 

      Schritt 3 — Erstellen eines erweiterten Beispiels mit mehreren ziehbaren Elementen

      Hier ist ein weiteres Beispiel dafür, wie Sie diese API verwenden können: Eine Aufgabenliste mit ziehbaren Aufgaben, die Sie von einer „zu erledigen"-Spalte in eine Spalte „erledigt" ziehen können.

      Animiertes Gif, das mehrere zu erledigen Aufgaben zeigt, die per Drag & Drop in eine Spalte „erledigt

      Um Ihre eigene zu erledigende Liste zu erstellen, fügen Sie mehr ziehbare Elemente mit einzigartigen IDs zu index.html hinzu:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie die Elemente in der Spalte zu erledigen zur Spalte erledigt. Sie haben eine zu erledigende Anwendung erstellt und die Funktionalität getestet.

      Zusammenfassung

      In diesem Artikel haben Sie eine zu erledigende Anwendung erstellt, um die Drag-and-Drop-Funktionalität zu untersuchen, die modernen Webbrowsern zur Verfügung steht.

      Die Drag und Drop API bietet mehrere Optionen für die Anpassung Ihrer Aktionen über das Ziehen und Ablegen. Beispielsweise können Sie die CSS-Styling Ihrer verschobenen Elemente aktualisieren. Anstatt das Element zu verschieben, können Sie sich auch dafür entscheiden, Ihr verschiebbares Element zu kopieren, so dass es beim Ablegen repliziert wird.

      Denken Sie daran, dass viele Webbrowser diese Technologie zwar unterstützen, Sie sich womöglich jedoch nicht darauf verlassen können, wenn Ihr Publikum aus Geräten besteht, die diese Funktionalität nicht unterstützen.

      Um mehr darüber zu erfahren, was Sie alles mit der Drag-and-Drop-API ablegen können, lesen Sie die Dokumente von MDN.



      Source link

      Cómo crear elementos de arrastrar y soltar con Vanilla JavaScript y HTML


      Introducción

      Arrastrar y soltar es una interacción de usuario común que se puede encontrar en muchas interfaces de usuario gráficas.

      Existen bibliotecas de JavaScript preexistentes para añadir la función de arrastrar y soltar a su aplicación. Sin embargo, es posible que haya situaciones en las que una biblioteca no esté disponible o que introduzca una dependencia o gasto general que su proyecto no necesita. En estas situaciones, conocer qué API están disponibles para usted en los navegadores web modernos puede ofrecer soluciones alternativas.

      La API Drag and Drop HTML se basa en el modelo de evento del DOM para obtener información sobre lo que se está arrastrando o soltando y actualizar ese elemento en arrastrar o saltar. Con los controladores de eventos de JavaScript, puede convertir cualquier elemento en un elemento que se puede arrastrar o en un elemento que se puede soltar.

      En este tutorial, crearemos un ejemplo de arrastrar y soltar usando la API Drag and Drop HTML con vanilla JavaScript para usar los controladores de eventos.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      • Un navegador web moderno compatible con la API Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Paso 1: Crear el proyecto y marcado inicial

      Nuestro proyecto consistirá en un contenedor con dos tipos de elementos secundarios:

      • Elementos secundarios que puede arrastrar
      • Elementos secundarios en los que se pueden soltar elementos

      Primero, abra la ventana de su terminal y cree un nuevo directorio de proyecto:

      • mkdir drag-and-drop-example

      Luego, diríjase a ese directorio:

      Después, cree un archivo index.html en ese directorio:

      Luego, añada código reutilizable para una página web HTML:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Y entre las etiquetas <body> añada su elemento draggable y su dropzone (objetivo para soltar):

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Guarde y cierre el archivo. Después, cree un archivo style.css:

      Luego, añada estilos para los elementos en el archivo index.html:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Esto añadirá un formato para la aplicación. Ahora puede ver index.html en el navegador y observar que esto produce un draggable <div> y un dropzone <div>.

      Captura de pantalla de los divs draggable y dropzone

      Luego, realizaremos explícitamente el primer <div> arrastrable añadiendo el atributo draggable:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Guarde y cierre el archivo.

      Finalmente, vea index.html en el navegador de nuevo. Si hacemos clic en el draggable <div> y lo arrastramos por la pantalla, debería haber una indicación visual de que se está moviendo.

      El valor predeterminado para el atributo draggable es auto. Eso significa que el comportamiento predeterminado de su navegador determinará si el elemento se puede arrastrar. Generalmente, esto significa que las selecciones, las imágenes y los enlaces se pueden arrastrar sin especificar draggable="true".

      Ahora ya tiene un archivo HTML con un elemento que se puede arrastrar. Pasaremos a añadir controladores onevent.

      Paso 2: Gestionar eventos de arrastrar y soltar con JavaScript

      Actualmente, si soltamos el ratón mientras arrastramos el elemento que se puede arrastrar, no pasará nada. Para activar una acción en arrastrar o soltar en elementos DOM, necesitaremos usar la API Drag and Drop:

      • ondragstart: Este controlador de eventos se adjuntará a nuestro elemento draggable y se accionará cuando se produzca un evento dragstart
      • ondragover: Este controlador de eventos estará adjunto a nuestro elemento dropzone y se accionará cuando se produzca un evento dragover
      • ondrop: Este controlador de eventos también estará adjunto a nuestro elemento dropzone y se accionará cuando se produzca un evento drop.

      Nota: En total hay ocho controladores de eventos: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart y ondrop. Para nuestro ejemplo, no los necesitaremos todos.

      Primero, vamos a hacer referencia a un nuevo archivo script.js en el archivo index.html:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Luego, cree un nuevo archivo script.js:

      El objeto DataTransfer realizará un seguimiento de la información relacionada con el arrastre actual. Para actualizar nuestro elemento en arrastrar y soltar, debemos acceder directamente al objeto DataTransfer. Para hacer esto, podemos seleccionar la propiedad dataTransfer desde el DragEvent del elemento DOM.

      Nota: El objeto DataTransfer puede realizar un seguimiento técnico de la información de varios elementos que se arrastran al mismo tiempo. Por nuestro ejemplo, nos enfocaremos en arrastrar un elemento.

      El método setData del objeto dataTransfer se puede usar para configurar la información del estado de arrastre para el elemento que arrastra actualmente. Emplea dos parámetros:

      • una cadena que declara el formato del segundo parámetro
      • los datos reales que se hayan transferido

      Nuestro objetivo es mover nuestro elemento draggable a un nuevo elemento principal. Deberíamos poder seleccionar nuestro elemento draggable con un id único. Podemos configurar el id del elemento arrastrado con el método setData para que pueda utilizarse más adelante.

      Revisemos nuestro archivo script.js y creemos una nueva función para usar setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Nota: Los navegadores Internet Explorer del 9 al 11 aparentemente tienen problemas para usar 'text/plain'. El formato debe 'text' para ese navegador.

      Para actualizar el estilo CSS del elemento arrastrado, podemos acceder a sus estilos usando el evento DOM de nuevo y configurando el estilo que nuestra preferencia para el currentTarget.

      Agreguemos a nuestra función y cambiemos el backgroundColor a yellow:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Nota: Los estilos que cambie deberán actualizarse manualmente de nuevo al soltar si desea estilos de arrastrar solamente. Si cambia algo cuando empieza a arrastrar, el elemento arrastrado mantendrá ese nuevo estilo a menos que lo modifique de nuevo.

      Ahora ya tenemos nuestra función de JavaScript para cuando se inicia el arrastre.

      Podemos añadir ondragstart al elemento draggable en index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Vea index.html en su navegador. Si intenta arrastrar su elemento ahora, se aplicará el estilo declarado en nuestra función:

      Gif animado que representa un elemento que se arrastra, pero que no se suelta

      Sin embargo, no pasará nada cuando suelte el botón del ratón.

      El siguiente controlador de eventos que se accionó en esta secuencia es ondragover.

      Normalmente, el comportamiento predeterminado de soltar para ciertos elementos DOM como <div> en navegadores no acepta la función de soltar. Este comportamiento interceptará el comportamiento que estamos tratando de implementar. Para garantizar que obtengamos el comportamiento de soltar deseado, aplicaremos preventDefault.

      Revisemos el archivo script.js y creemos una nueva función para usar preventDefault: Añada este código al final del archivo:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Ahora, podemos añadir ondragover a nuestro elemento dropzone en index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      En este momento, aún no hemos escrito el código para controlar la función real de soltar. El controlador de eventos final que se accionó en esta secuencia es ondrop.

      Volvamos a revisar nuestro archivo script.js y creemos una nueva función.

      Podemos hacer referencia a los datos que guardamos anteriormente con el método setData del objeto dataTransfer. Usaremos el método getData del objeto dataTransfer. Los datos que configuramos fueron el id, así que eso es lo que se devolverá:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Seleccione nuestro elemento draggable con el id que recuperamos:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Seleccione nuestro elemento dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Añada nuestro elemento draggable al dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Restablezca nuestro objeto dataTransfer:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Ahora, podemos añadir ondragover a nuestro elemento dropzone en index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Una vez hecho esto, tendremos una función de arrastrar y soltar finalizada. Vea index.html en su navegador y arrastre el elemento draggable al dropzone.

      Gif animado que representa un elemento que se arrastra y se suelta en un objetivo para soltar

      Nuestro ejemplo gestiona el caso de un solo elemento que se puede arrastrar y un único objetivo para soltar. Puede tener varios elementos que se pueden arrastrar, varios objetivos para soltar y personalizarlos con todos los demás controladores de eventos de la API Drag and Drop

      Paso 3: Crear un ejemplo avanzado con múltiples elementos que se pueden arrastrar

      Aquí hay un ejemplo más de cómo se podría usar esta API: una lista de cosas por hacer con tareas que se pueden arrastrar de una columna "Tareas pendientes" a otra columna de "Completadas".

      Gif animado que representa múltiples tareas siendo arrastradas y soltadas en la columna Completadas

      Para crear su propia lista de tareas pendientes, añada más elementos que se pueden arrastrar con id únicos a index.html:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Vea index.html en su navegador y arrastre los elementos en la columna Tareas pendientes a la columna Completadas. Ha creado una aplicación de tareas pendientes y ha probado su funcionalidad.

      Conclusión

      En este artículo, creó una app de tareas pendientes para explorar la funcionalidad de arrastrar y soltar que está disponible para los navegadores web modernos.

      La API Drag and Drop proporciona múltiples opciones para personalizar sus acciones más allá de arrastrar y soltar. Por ejemplo, puede actualizar el estilo CSS de sus elementos arrastrados. Además, en vez de mover el elemento, puede elegir copiar el elemento que se puede arrastrar de forma que se duplique al soltarse

      Tenga en cuenta que, si bien muchos navegadores web son compatibles con esta tecnología, es posible que no pueda serle útil si su audiencia tiene dispositivos que no son compatibles con esta funcionalidad.

      Para obtener más información sobre todo lo que puede soltar con la API Drag and Drop , consulte los documentos de MDN.



      Source link

      Comment créer des éléments par glisser-déposer avec Vanilla JavaScript et HTML


      Introduction

      Le glisser-déposer est une interaction utilisateur courante que vous pouvez trouver dans de nombreuses interfaces graphiques.

      Il existe des bibliothèques JavaScript préexistantes permettant d’ajouter une fonction de glisser-déposer à votre application. Toutefois, il peut arriver qu’une bibliothèque ne soit pas disponible ou qu’elle introduise une surcharge ou une dépendance dont votre projet n’a pas besoin. Dans de telles situations, la connaissance des API dont vous disposez dans les navigateurs web modernes peut vous offrir des solutions alternatives.

      L’API HTML Drag and Drop s’appuie sur le modèle d’événement de DOM pour obtenir des informations sur ce qui est glissé ou déposé et pour mettre à jour cet élément par glisser-déposer. Grâce aux gestionnaires d’événements JavaScript, vous pouvez transformer n’importe quel élément en un élément pouvant être glissé ou déposé.

      Dans ce tutoriel, nous allons construire un exemple de glisser-déposer en utilisant l’API HTML Drag and Drop avec Vanilla JavaScript pour utiliser les gestionnaires d’événements.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin de :

      • Un navigateur web moderne qui supporte l’API Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Étape 1 – Création du projet et balisage initial

      Notre projet consistera en un conteneur avec deux types d’éléments enfant :

      • Des éléments enfant que vous pouvez faire glisser
      • Des éléments enfant dans lesquels il est possible de déposer des éléments

      Tout d’abord, ouvrez la fenêtre de votre terminal et créez un nouveau répertoire de projets :

      • mkdir drag-and-drop-example

      Ensuite, naviguez vers ce répertoire :

      Puis créez un fichier index.html dans ce répertoire :

      Ajoutez maintenant du code passe-partout pour une page web HTML :

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Et entre les balises <body> ajoutez votre élément draggable et votre dropzone (cible de largage) :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Enregistrez et fermez le fichier. Ensuite, créez un fichier style.css :

      Puis, ajoutez des styles pour les éléments de notre fichier index.html :

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Cela permettra d'ajouter un certain formatage à l'application. Vous pouvez maintenant visualiser index.html dans le navigateur et observer que cela produit un dragable <div> et un dropzone <div>.

      Capture d'écran des div draggable et dropzone

      Ensuite, nous rendrons explicitement le premier <div> glissant en ajoutant l'attribut draggable :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Enregistrez et fermez le fichier.

      Enfin, regardez à nouveau index.html dans le navigateur. Si nous cliquons sur le draggable <div> et le faisons glisser sur l'écran, il doit y avoir une indication visuelle de son déplacement.

      La valeur par défaut de l'attribut draggable est auto. Cela signifie que la possibilité de faire glisser l'élément sera déterminée par le comportement par défaut de votre navigateur. En général, cela signifie que les sélections de texte, les images et les liens peuvent être glissés sans qu'il soit nécessaire de spécifier draggable=" true".

      Vous avez maintenant un fichier HTML avec un élément glissant. Nous passerons à l'ajout de gestionnaires onevents.

      Étape 2 - Gestion des événements par glisser-déposer avec JavaScript

      Actuellement, si nous relâchons la souris tout en faisant glisser l'élément déplaçable, il ne se passe rien. Pour déclencher une action sur les éléments du DOM par glisser-déposer, nous devons utiliser l'API Drag and Drop :

      • ondragstart : ce gestionnaire d'événement sera attaché à notre élément draggable et se déclenchera lorsqu'un événement dragstart se produira.
      • ondragover : ce gestionnaire d'événements sera attaché à notre élément dropzone et se déclenchera lorsqu'un événement dragover se produira.
      • ondrop : ce gestionnaire d'événements sera également attaché à notre élément dropzone et se déclenchera lorsqu'un événement drop se produira.

      Remarque : il y a huit gestionnaires d'événements au total : ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart et ondrop. Dans le cadre de notre exemple, nous n'aurons pas besoin de tous.

      Tout d'abord, référençons un nouveau fichier script.js dans notre index.html :

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Ensuite, nous allons créer un nouveau fichier script.js :

      L'objet DataTransfer conservera les informations relatives à la traînée actuelle. Pour mettre à jour notre élément par glisser-déposer, nous devons accéder directement à l'objet DataTransfer. Pour ce faire, nous pouvons sélectionner la propriété dataTransfer de l'élément DOM DragEvent.

      Remarque : l'objet DataTransfer peut techniquement suivre les informations de plusieurs éléments glissés en même temps. Dans le cadre de notre exemple, nous nous concentrerons sur le glissement d'un élément.

      La méthode setData de l'objet dataTransfer peut être utilisée afin de définir les informations d'état de glissement pour votre élément actuellement glissé. Il faut deux paramètres :

      • une chaîne qui déclare le format du deuxième paramètre
      • les données réelles transférées

      Notre objectif est de déplacer notre élément draggable vers un nouvel élément parent. Nous devons pouvoir sélectionner notre élément draggable avec un identifiant unique. Nous pouvons définir l’identifiant de l'élément glissé avec la méthode setData pour qu'il puisse être utilisé plus tard.

      Revisitons notre fichier script.js et créons une nouvelle fonction pour utiliser setData :

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Remarque : Internet Explorer 9 à 11 aurait des problèmes avec l'utilisation de "text/plain". Le format doit être 'text' pour ce navigateur.

      Pour mettre à jour le style CSS de l'élément glissé, nous pouvons accéder à ses styles en utilisant à nouveau l'événement DOM et en définissant les styles que nous voulons pour la currentTarget.

      Ajoutons-les à notre fonction et changeons la backgroundColor en yellow :

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Remarque : tous les styles que vous modifiez devront être à nouveau mis à jour manuellement sur drop si vous souhaitez des styles par glisser-déposer. Si vous changez quelque chose quand il commence à glisser, l'élément glissé conservera ce nouveau style à moins que vous ne le changiez à nouveau.

      Maintenant, nous avons notre fonction JavaScript pour le démarrage du glissement.

      Nous pouvons ajouter ondragstart à l'élément draggable dans index.html :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Consultez index.html dans votre navigateur. Si vous essayez de faire glisser votre objet maintenant, le style déclaré dans notre fonction sera appliqué :

      Gif animé représentant un élément se faisant glisser mais ne pouvant pas être déposer

      Cependant, rien ne se passera lorsque vous relâcherez votre clic.

      Le prochain gestionnaire d'événements déclenché dans cette séquence est ondragover.

      Le comportement par défaut de certains éléments DOM comme <div> dans les navigateurs n'accepte généralement pas d'être déposé. Ce comportement interceptera le comportement que nous essayons de mettre en œuvre. Pour nous assurer que nous obtenons le comportement drop souhaité, nous appliquerons preventDefault.

      Revisitons notre fichier script.js et créons une nouvelle fonction pour utiliser preventDefault. Ajoutez ce code à la fin du fichier :

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Maintenant, nous pouvons ajouter ondragover à notre élément dropzone dans index.html :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      À ce stade, nous n'avons toujours pas de code écrit pour gérer le dépôt réel. Le dernier gestionnaire d'événements déclenché dans cette séquence est ondrop.

      Revoyons notre fichier script.js et créons une nouvelle fonction.

      Nous pouvons référencer les données que nous avons enregistrées précédemment avec la méthode setData de l'objet dataTransfer. Nous utiliserons la méthode getData de l'objet dataTransfer. Les données que nous avons établies étaient l’id, c'est donc ce qui nous sera renvoyé :

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Sélectionnons notre élément draggable avec l’id que nous avons récupéré :

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Sélectionnons notre élément dropzone :

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Ajoutons notre élément draggable à la dropzone :

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Réinitialisons notre objet DataTransfer :

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Maintenant, nous pouvons ajouter ondrop à notre élément dropzone dans index.html :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Une fois que cela est fait, nous avons une fonction de glisser-déposer fonctionnelle. Affichez index.html dans votre navigateur et faites glisser l'élément draggable sur la dropzone.

      Gif animé représentant un élément glissé et déposé dans une cible de largage

      Notre exemple porte sur le scénario d'un seul objet pouvant être déplacé et d'une seule cible de largage. Vous pouvez avoir plusieurs objets à faire glisser, plusieurs cibles où les déposer, et personnaliser tout cela avec tous les autres gestionnaires d'événements de l'API Drag and Drop.

      Étape 3 - Construction d'un exemple complexe avec plusieurs éléments glissants

      Voici un autre exemple de la manière dont vous pourriez utiliser cette API : une liste de tâches avec des tâches glissantes que vous pouvez déplacer d'une colonne "To-do" à une colonne "Done".

      Gif animé représentant plusieurs tâches glissées et déposées dans une colonne Done

      Pour créer votre propre liste de tâches, ajoutez à index.html d'autres éléments à faire glisser avec des ids uniques :

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Affichez index.html dans votre navigateur et faites glisser les éléments de la colonne To-do vers la colonne Done. Vous avez créé une application to-do et testé la fonctionnalité.

      Conclusion

      Dans cet article, vous avez créé une application to-do pour explorer la fonctionnalité de glisser-déposer qui est disponible pour les navigateurs web modernes.

      L'API Drag and Drop offre de multiples options pour personnaliser vos actions au-delà du simple glisser-déposer. Par exemple, vous pouvez mettre à jour le style CSS de vos éléments glissés. Vous pouvez également, au lieu de déplacer l'élément, choisir de copier votre élément déplaçable afin qu'il soit reproduit lors du dépôt.

      Gardez à l'esprit que si de nombreux navigateurs web prennent en charge cette technologie, vous ne pourrez peut-être pas vous y fier si votre public se compose d’appareils qui ne prennent pas en charge cette fonctionnalité.

      Pour en savoir plus sur tout ce que vous pouvez déposer avec l'API Drag and Drop, consultez les documents du MDN à ce sujet.



      Source link