From 6772831200d14c2436aea2d0c837f40dbf12156f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 26 Sep 2021 13:11:47 +0200 Subject: Prepare Web API section for Markdown conversion (#2464) * Remove summary classes and ids * Remove unecessary hidden * Remove useless span filled with useless attributes / ids * Remove useless font * Remove notranslate * Remove id in other elements than headings * Remove name attributes * Remove 
 for JS w/ language-js class

* Remove 
 for HTML w/ language-html class

* Remove 
 for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI
---
 files/fr/web/api/html_drag_and_drop_api/index.html | 46 ++++++++++++----------
 1 file changed, 26 insertions(+), 20 deletions(-)

(limited to 'files/fr/web/api/html_drag_and_drop_api/index.html')

diff --git a/files/fr/web/api/html_drag_and_drop_api/index.html b/files/fr/web/api/html_drag_and_drop_api/index.html
index 8a41f5a36f..f9856ebd08 100644
--- a/files/fr/web/api/html_drag_and_drop_api/index.html
+++ b/files/fr/web/api/html_drag_and_drop_api/index.html
@@ -12,7 +12,9 @@ original_slug: Web/API/API_HTML_Drag_and_Drop
 ---
 
{{DefaultAPISidebar("HTML Drag and Drop API")}}

 
-
L'interface HTML Drag and Drop (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur. L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.

+
L'interface HTML Drag and Drop (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur.

+
+
L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.

 
 
Pour les sites web et les extensions, on peut personnaliser les éléments qui peuvent être déplacés, la façon dont ceux-ci sont signalés et les éléments qui peuvent servir de destination.

 
@@ -41,12 +43,12 @@ original_slug: Web/API/API_HTML_Drag_and_Drop
   
    {{event('dragend')}}
    {{domxref('GlobalEventHandlers.ondragend','ondragend')}}
-   …une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir Terminer un déplacement)
+   …une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir Terminer un déplacement)
   
   
    {{event('dragenter')}}
    {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}
-   …un élément en cours de déplacement arrive sur une zone de dépôt valide (voir indiquer une cible de destination).
+   …un élément en cours de déplacement arrive sur une zone de dépôt valide (voir indiquer une cible de destination).
   
   
    {{event('dragexit')}}
@@ -66,17 +68,19 @@ original_slug: Web/API/API_HTML_Drag_and_Drop
   
    {{event('dragstart')}}
    {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}
-   …l'utilisateur commence à déplacer un élément (voir démarrer une opération de glissement).
+   …l'utilisateur commence à déplacer un élément (voir démarrer une opération de glissement).
   
   
    {{event('drop')}}
    {{domxref('GlobalEventHandlers.ondrop','ondrop')}}
-   …un élément est déposé sur une cible valide (voir déposer un élément).
+   …un élément est déposé sur une cible valide (voir déposer un élément).
   
  
 
 
-
Note : Les évènements dragstart et dragend ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.

+

+  
Note : Les évènements dragstart et dragend ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.

+

 
 
Interfaces

 
@@ -101,11 +105,13 @@ original_slug: Web/API/API_HTML_Drag_and_Drop
 
 
La différence principale entre {{domxref("DataTransfer")}} et {{domxref("DataTransferItem")}} est l'utilisation de la méthode synchrone {{domxref("DataTransfer.getData","getData()")}} pour la première et de la méthode asynchrone {{domxref("DataTransferItem.getAsString","getAsString()")}} pour la deuxième.

 
-
Note : {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.

+

+  
Note : {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.

+

 
 
Interfaces spécifiques à Gecko

 
-
Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir Glisser-déposer plusieurs objets. Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble des propriétés spécifique à Gecko et des méthodes spécifiques à Gecko.

+
Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir Glisser-déposer plusieurs objets. Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble des propriétés spécifique à Gecko et des méthodes spécifiques à Gecko.

 
 
Bases

 
@@ -125,7 +131,7 @@ function dragstart_handler(ev) {
 <p id="p1" draggable="true" ondragstart="dragstart_handler(event)">Cet élément est déplaçable.</p>
 

 
-
Voir la page de référence sur l'attribut draggable et le guide sur les opérations de déplacement pour plus d'informations.

+
Voir la page de référence sur l'attribut draggable et le guide sur les opérations de déplacement pour plus d'informations.

 
 
Définir les données déplacées

 
@@ -141,7 +147,7 @@ function dragstart_handler(ev) {
 }
 

 
-
Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir les types recommandés. Pour plus d'informations sur les informations transportées, voir Drag Data.

+
Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir les types recommandés. Pour plus d'informations sur les informations transportées, voir Drag Data.

 
 
Définir l'image pour le déplacement

 
@@ -157,7 +163,7 @@ function dragstart_handler(ev) {
 }
-

Pour en savoir plus, voir Définir l'image de feedback pour le glisser-déposer.

+

Pour en savoir plus, voir Définir l'image de feedback pour le glisser-déposer.

Définir l'effet de déplacement

@@ -180,7 +186,7 @@ function dragstart_handler(ev) { } -

See Drag Effects for more details.

+

See Drag Effects for more details.

Définir la zone où déposer l'élément déplacé

@@ -241,13 +247,13 @@ function drop_handler(ev) {

À la fin de l'opération, c'est l'évènement {{event("dragend")}} qui est déclenché sur l'élément source (celui qui a été "saisi" au début). Cet évènement est déclenché lorsque l'opération est terminée ou qu'elle a été annulée. Le gestionnaire d'évènement pour {{event("dragend")}} peut vérifier la valeur de la propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} afin de déterminer si l'opération a réussi ou non.

-

Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir Terminer un glisser-déposer.

+

Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir Terminer un glisser-déposer.

Interopérabilité

Comme on peut le voir dans le tableau de compatibilité pour l'interface DataTransferItem, la prise en charge du drag-and-drop est assez répandue parmi les navigateurs de bureau à l'exception des interfaces {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}}. Ce tableau montre également que la prise en charge sur mobile est assez faible.

-

Exemples et démos

+

Exemples et démos

-

Voir aussi

+

Voir aussi

-- cgit v1.2.3-54-g00ecf