JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.js"></script>
<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

CSS

#draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blue;
    margin-bottom: 10px;
    padding: 10px;
  }

JavaScript

var dragged;

  /* Les événements sont déclenchés sur les objets glissables */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // Stocke une référence sur l'objet glissable
      dragged = event.target;
      // transparence 50%
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // reset de la transparence
      event.target.style.opacity = "";
  }, false);

  /* Les événements sont déclenchés sur les cibles du drop */
  document.addEventListener("dragover", function( event ) {
      // Empêche default d'autoriser le drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
      event.preventDefault();
      // Déplace l'élément traîné vers la cible du drop sélectionnée
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);