logo oujood
🔍

 HTML attribut dropzone

OUJOOD.COM

Définition et utilisation de l'attribut dropzone

HTML – Les attributs globaux

L'attribut dropzone spécifie si les données glissées seront copiées, déplacées ou liées, quand elles atteignent un élément de destination. Cet attribut a été retiré de la spécification HTML5 et n'est plus supporté.

Syntaxe :

<element dropzone="copy|move|link">

Exemple d'utilisation de l'attribut dropzone (obsolète)

Exemple :   📋 Copier le code 

  <!DOCTYPE html>
  <html lang="fr">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Exemple dropzone (obsolète)</title>
  <style>
    .drop-zone {
      width: 200px;
      height: 100px;
      border: 2px dashed #ccc;
      padding: 20px;
      margin: 10px;
      text-align: center;
    }
  </style>
  </head>
  <body>
  <div class="drop-zone" dropzone="copy">
    Zone de dépôt (copie)
  </div>
  <div class="drop-zone" dropzone="move">
    Zone de dépôt (déplacement)
  </div>
  <div class="drop-zone" dropzone="link">
    Zone de dépôt (lien)
  </div>
  
  <p><strong>Note:</strong> Cet attribut n'est plus supporté par les navigateurs modernes.</p>
  <p><strong>Alternative:</strong> Utilisez l'API Drag and Drop avec JavaScript.</p>
  </body>
  </html>

Navigateurs pris en charge

Internet Explorer - Non supporté Firefox - Non supporté Opera - Non supporté Google Chrome - Non supporté Safari - Non supporté

L'attribut dropzone n'a jamais été implémenté par les navigateurs et a été officiellement retiré de la spécification HTML5. Il ne doit plus être utilisé dans de nouveaux projets.

Différences entre HTML 4.01 et HTML5

L'attribut dropzone était nouveau en HTML5, mais il n'existait pas en HTML 4.01.

Statut actuel : Cet attribut a été retiré de la spécification HTML5 en raison du manque de support des navigateurs.

Valeurs de l'attribut (historiques)

Valeur Description
copy Suppression des données qui se traduisait par une copie des données glissées
move Se traduisait par le fait que les données glissées étaient déplacées vers le nouvel emplacement
link Suppression des données qui se traduisait par un lien vers les données d'origine

Alternative moderne : API Drag and Drop

✅ Solution recommandée :

Utilisez l'API Drag and Drop standard avec les événements JavaScript :

  • dragstart, dragover, drop
  • event.dataTransfer.effectAllowed et event.dataTransfer.dropEffect
  • Attribut draggable="true" sur les éléments source

Pourquoi dropzone a été retiré ?

⚠️ Raisons du retrait :
  • Aucun navigateur n'a jamais implémenté cet attribut
  • L'API Drag and Drop JavaScript était suffisante et plus flexible
  • Manque d'intérêt et d'utilisation de la part des développeurs
  • Complexité d'implémentation pour un bénéfice limité
 Retour à la liste des attributs globaux      
Accueil HTML 5
Par gerywa – 20 mars 2014 (mis à jour janvier 2025)