Superheroes and the ball are elements with the class "draggable". Make them really draggable.
+ Les superhéros et la balle sont des éléments ayant la classe "draggable". Rendez les effectivement déplaçable.
- Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.
+ Important: limitez le déplacement au niveau de la fenêtre. Si un élément déplaçable atteint le haut ou le bas de la fenêtre, alors la page doit défiler pour nous permettre de le déplacer d'avantage.
- If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.
+ Si votre écran est assez large pour contenir tout le document -- rendez la fenêtre plus petite afin d'obtenir un défilement vertical, pour que vous puissiez le tester.
- In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.
+ dans cette tâche, il est suffisant de gérer le défilement vertical. Souvent, il n’y a pas de défilement horizontal, et il est géré de manière similaire au besoin.
- And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.
+ Et aussi: Les héros ne doivent jamais quitter la page. S'ils atteignent le bord document, il ne doit pas avoir de déplacement en dehors de ce dernier.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css
index 00d5d70fc..9455f54b0 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css
@@ -10,7 +10,7 @@ html, body {
float: left;
}
-/* heroes and the ball (dragables) */
+/* heros et la balle (deplacable) */
.hero {
background: url(https://js.cx/drag-heroes/heroes.png);
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
index 1c1443a7e..3afa379ac 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
@@ -24,9 +24,9 @@ document.addEventListener('mousedown', function(event) {
moveAt(event.clientX, event.clientY);
}
- // on drag start:
- // remember the initial shift
- // move the element position:fixed and a direct child of body
+ // commencer a l'evenement deplacer:
+ // se rappeler du changement initial
+ // depalcerla position:fixed de l' element et un element enfant directe de l'element body
function startDrag(element, clientX, clientY) {
if(isDragging) {
return;
@@ -45,7 +45,7 @@ document.addEventListener('mousedown', function(event) {
moveAt(clientX, clientY);
};
- // switch to absolute coordinates at the end, to fix the element in the document
+ // changer a absolue les coordonnees en bas, pour fixer l'element dans le document
function finishDrag() {
if(!isDragging) {
return;
@@ -61,49 +61,49 @@ document.addEventListener('mousedown', function(event) {
}
function moveAt(clientX, clientY) {
- // new window-relative coordinates
+ // nouvelles coordonnees relatives a la fenetre
let newX = clientX - shiftX;
let newY = clientY - shiftY;
- // check if the new coordinates are below the bottom window edge
+ // controler si les nouvelles coordonneses sont au dessous sous du bord inferieur de la fenetre
let newBottom = newY + dragElement.offsetHeight; // new bottom
- // below the window? let's scroll the page
+ // au dessous de la fenetre? on fait defiler la page
if (newBottom > document.documentElement.clientHeight) {
- // window-relative coordinate of document end
+ // fin de coordonne relativement a la fenetre du document
let docBottom = document.documentElement.getBoundingClientRect().bottom;
- // scroll the document down by 10px has a problem
- // it can scroll beyond the end of the document
- // Math.min(how much left to the end, 10)
+ // fait defiler le document vers le bas par 10px contient un probleme
+ // cela peut defiler au dela de la fin du document
+ // Math.min(combien reste t il vers la fin du document, 10)
let scrollY = Math.min(docBottom - newBottom, 10);
- // calculations are imprecise, there may be rounding errors that lead to scrolling up
- // that should be impossible, fix that here
+ // les calsculs sont imprecises, il peut subsiter des erreurs d'arrondis pouvant mener a un defilement vers le haut
+ // cela ne devrait pas exister, on resouds cela ici
if (scrollY < 0) scrollY = 0;
window.scrollBy(0, scrollY);
- // a swift mouse move make put the cursor beyond the document end
- // if that happens -
- // limit the new Y by the maximally possible (right at the bottom of the document)
+ // un deplacement rapide de la souris peut mettre le curseur au dela des limites du document
+ // Si cela survient-
+ // limite le nouveau Y (new Y) au maximum possible ( tout just au bas dudocument)
newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight);
}
- // check if the new coordinates are above the top window edge (similar logic)
+ // Controler si les nouvelles coordonnees sont au dessus des limites superieures de la fenetre ( logique similaire)
if (newY < 0) {
- // scroll up
+ // defile vers le haut
let scrollY = Math.min(-newY, 10);
- if (scrollY < 0) scrollY = 0; // check precision errors
+ if (scrollY < 0) scrollY = 0; // controler les erreurs de precisions
window.scrollBy(0, -scrollY);
- // a swift mouse move can put the cursor beyond the document start
- newY = Math.max(newY, 0); // newY may not be below 0
+ //un deplacement rapide de la souris peut mettre le curseur au dela du debut du document
+ newY = Math.max(newY, 0); // newY ne doit pas etre moins de 0
}
- // limit the new X within the window boundaries
- // there's no scroll here so it's simple
+ // limite le nouveau X (new X) dans les limites de la fenetre
+ // il n'y a pas de defilement donc c'est simple
if (newX < 0) newX = 0;
if (newX > document.documentElement.clientWidth - dragElement.offsetWidth) {
newX = document.documentElement.clientWidth - dragElement.offsetWidth;
@@ -113,4 +113,4 @@ document.addEventListener('mousedown', function(event) {
dragElement.style.top = newY + 'px';
}
-});
\ No newline at end of file
+});
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html
index d79ef30a4..ecdd465cc 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html
@@ -8,17 +8,17 @@
-
Place superheroes around the soccer field.
+
Placez les superhéros un peu partout dans le terrain de football.
-
Superheroes and the ball are elements with the class "draggable". Make them really draggable.
+
Les superhéros et la balle sont des éléments ayant la classe "draggable". Rendez les effectivement déplaçable.
-
Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.
+
Important: limitez le déplacement au niveau de la fenêtre. Si un élément déplaçable atteint le haut ou le bas de la fenêtre, alors la page doit défiler pour nous permettre de le déplacer d'avantage.
-
If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.
+
Si votre écran est assez large pour contenir tout le document -- rendez la fenêtre plus petite afin d'obtenir un défilement vertical, pour que vous puissiez le tester.
-
In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.
+
dans cette tâche, il est suffisant de gérer le défilement vertical. Souvent, il n’y a pas de défilement horizontal, et il est géré de manière similaire au besoin.
-
And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.
+
Et aussi: Les héros ne doivent jamais quitter la page. S'ils atteignent le bord document, il ne doit pas avoir de déplacement en dehors de ce dernier.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css
index 00d5d70fc..089e7dccf 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css
@@ -10,7 +10,7 @@ html, body {
float: left;
}
-/* heroes and the ball (dragables) */
+/* heros et la balle (deplacable) */
.hero {
background: url(https://js.cx/drag-heroes/heroes.png);
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
index 16add0cf8..d7a6e7343 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
@@ -2,19 +2,18 @@ importance: 5
---
-# Drag superheroes around the field
+# Glisser les superhéros à l’intérieur du terrain
-This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
+Cette tache peut vous aider à contrôler votre compréhension de plusieurs aspects du Glissez-déplacez et du DOM
-Make all elements with class `draggable` -- draggable. Like a ball in the chapter.
+Donnez tous les éléments la classe `draggable` -- déplaçable. Comme une balle dans le chapitre.
+Etapes requises:
-Requirements:
+- Utilisez la délégation d’évènement pour détecter start: un gestionnaire d’évènement unique sur `document` pour l’évènement `mousedown`.
+- Si les éléments sont glisses jusqu’a aux limites supérieures ou inferieure de la fenêtre – la page défile en haut/bas pour permettre plus de déplacement.
+- IL n’y a pas de défilement horizontal.
+- Les éléments déplaçables éléments ne doivent jamais quitter la fenêtre, même si après un déplacement rapide de la souris.
-- Use event delegation to track drag start: a single event handler on `document` for `mousedown`.
-- If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging.
-- There is no horizontal scroll.
-- Draggable elements should never leave the window, even after swift mouse moves.
+La démonstration est trop longue pour être contenue ici, voici un lien de cette dernière.
-The demo is too big to fit it here, so here's the link.
-
-[demo src="solution"]
+[demo src="solution"]
\ No newline at end of file
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md
index 9c919f811..563620602 100644
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md
@@ -1,27 +1,27 @@
-# Drag'n'Drop with mouse events
+# Les évènements Glisser-Déposer de la souris
-Drag'n'Drop is a great interface solution. Taking something, dragging and dropping is a clear and simple way to do many things, from copying and moving (see file managers) to ordering (drop into cart).
+Le Glisser-déposer est une excellente solution d’interface. Prendre quelque chose, la déplacer et la déposer est une manière claire et simple de faire plusieurs choses, de copier et (voir les gestionnaires de fichiers) en passant par le rangement (déposer dans un panier).
+
+Le standard modern de l’HTML dispose d’une [section sur le Glisser- Déposer](https://html.spec.whatwg.org/multipage/interaction.html#dnd) avec les évènements spéciaux tels que `dragstart`, `dragend` et ainsi de suite.
-In the modern HTML standard there's a [section about Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd) with special events such as `dragstart`, `dragend` and so on.
+Ils sont intéressants parce qu’ils permettent de résoudre facilement des taches simples. Ils permettent aussi de gérer le glisser-déposer de fichiers "externes" dans le navigateur. Donc nous pouvons prendre un fichier dans le gestionnaire du système d’exploitation et le déposer dans la fenêtre du navigateur. Ensuite JavaScript obtient l’accès à ses contenus.
-They are interesting because they allow to solve simple tasks easily, and also allow to handle drag'n'drop of "external" files into the browser. So we can take a file in the OS file-manager and drop it into the browser window. Then JavaScript gains access to its contents.
+Mais les Evènements natifs de types déplacer ont aussi leurs limites. Par exemple, nous ne pouvons pas limiter le glissement sur une certaine surface. Nous ne pouvons pas le faire seulement de manière "horizontale" ou "verticale". Il existe d’autres taches, Glisser-déplacer, qui ne peuvent être implémentées en utilisant cet Interface de Programmation d’Application.
-But native Drag Events also have limitations. For instance, we can't limit dragging by a certain area. Also we can't make it "horizontal" or "vertical" only. There are other drag'n'drop tasks that can't be implemented using that API.
+Alors ici, nous allons voir comment mettre en œuvre le Glisser-déposer en utilisant les évènements de la souris. Cela n’est pas difficile non plus.
-So here we'll see how to implement Drag'n'Drop using mouse events. Not that hard either.
+## L’algorithme du Glisser- Déposer
-## Drag'n'Drop algorithm
+L’algorithme de base du Glisser-Déposer ressemble à ceci:
-The basic Drag'n'Drop algorithm looks like this:
+1. Attraper l’évènement `mousedown` sur un élément déplaçable.
+2. Préparer l’élément pour un glissement (peut être créer une copie de celui-ci ou autre chose).
+3. Ensuite à l’évènement `mousemove` le faire glisser en changeant les propriétés `left/top` et `position:absolute`.
+4. A l’exécution de l’évènement `mouseup` (relâchement du bouton) – faire toutes les actions liées a un Glisser-Déposer effectué.
-1. Catch `mousedown` on a draggable element.
-2. Prepare the element for moving (maybe create a copy of it or whatever).
-3. Then on `mousemove` move it by changing `left/top` and `position:absolute`.
-4. On `mouseup` (button release) -- perform all actions related to a finished Drag'n'Drop.
+Ce sont les étapes de bases. Nous pouvons l’étendre, par exemple, en mettant en valeur les éléments déposables (disponible a recevoir une action déposer) lorsqu’on les survolent.
-These are the basics. We can extend it, for instance, by highlighting droppable (available for the drop) elements when hovering over them.
-
-Here's the algorithm for drag'n'drop of a ball:
+Voici l’algorithme pour le Glisser-Déposer d’une balle:
```js
ball.onmousedown = function(event) { // (1) start the process
@@ -29,14 +29,14 @@ ball.onmousedown = function(event) { // (1) start the process
// (2) prepare to moving: make absolute and on top by z-index
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
- // move it out of any current parents directly into body
- // to make it positioned relative to the body
+ // le deplacer hors de ses parents en cours directement sur un l’element body
+ // le positionner relativement à l’élément body
document.body.append(ball);
- // ...and put that absolutely positioned ball under the cursor
+ // ... et mettre cette balle positionnée de manière absolue sous le curseur
moveAt(event.pageX, event.pageY);
- // centers the ball at (pageX, pageY) coordinates
+ // Centrer la balle aux coordonnées (pageX, pageY)
function moveAt(pageX, pageY) {
ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
@@ -46,10 +46,10 @@ ball.onmousedown = function(event) { // (1) start the process
moveAt(event.pageX, event.pageY);
}
- // (3) move the ball on mousemove
+ // (3) Faire glisser la balle a l’evenement mousemove
document.addEventListener('mousemove', onMouseMove);
- // (4) drop the ball, remove unneeded handlers
+ // (4) déposer la balle, enlever les gestionnaires d’évènements dont on a pas besoin
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
@@ -58,19 +58,19 @@ ball.onmousedown = function(event) { // (1) start the process
};
```
-If we run the code, we can notice something strange. On the beginning of the drag'n'drop, the ball "forks": we start dragging its "clone".
+Si nous exécutons le code, nous pouvons remarquer quelque chose d’étrange. Au début de l’action Glisser-Déposer, la balle est prise en "fourchette": Nous commençons à faire glisser son "clone".
```online
-Here's an example in action:
+Voici un exemple en action:
[iframe src="ball" height=230]
-Try to drag'n'drop the mouse and you'll see the strange behavior.
+Essayer de Glisser-Déposer avec la souris et vous verrez l’étrange effet.
```
-That's because the browser has its own Drag'n'Drop for images and some other elements that runs automatically and conflicts with ours.
+C’est parce que le navigateur a son propre Glisser-Déposer pour les images et quelques autres éléments qui s’exécute automatiquement et entre en conflit avec le nôtre.
-To disable it:
+Pour le désactiver:
```js
ball.ondragstart = function() {
@@ -78,40 +78,40 @@ ball.ondragstart = function() {
};
```
-Now everything will be all right.
+Maintenant tout rentre dans l’ordre.
```online
-In action:
+En action:
[iframe src="ball2" height=230]
```
-Another important aspect -- we track `mousemove` on `document`, not on `ball`. From the first sight it may seem that the mouse is always over the ball, and we can put `mousemove` on it.
+Un autre aspect important—nous suivons l’évènement `mousemove` sur le `document`, pas sur la `balle`. A première vue, il semblerait que la souris soit toujours sur la balle, et nous pouvons lui appliquer l’évènement `mousemove`.
-But as we remember, `mousemove` triggers often, but not for every pixel. So after swift move the cursor can jump from the ball somewhere in the middle of document (or even outside of the window).
+Mais si nous nous rappelons, l’évènement `mousemove` se déclenche souvent, mais pas sur chaque pixel. Donc après un mouvement rapide, le curseur peut sauter de la balle pour aller quelque part au milieu du document (oubien même hors de la fenêtre).
-So we should listen on `document` to catch it.
+Donc nous devons écouter le `document` pour le capturer.
-## Correct positioning
+## Positionnent correcte
-In the examples above the ball is always moved so, that it's center is under the pointer:
+Dans les exemples ci-dessus la balle est toujours déplacée ainsi, de sorte à ce que son centre soit au-dessous du curseur:
```js
ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
```
-Not bad, but there's a side-effect. To initiate the drag'n'drop, we can `mousedown` anywhere on the ball. But if do it at the edge, then the ball suddenly "jumps" to become centered.
+Pas mal, mais il y a un effet secondaire. Pour initier le Glissser-Deposer, nous pouvons appliquer un `mousedown` n’importe où sur la balle. Mais si nous le faisons sur le rebord, alors la balle "saute" soudainement pour être centrée.
-It would be better if we keep the initial shift of the element relative to the pointer.
+Ce serait mieux si nous gardions le changement initial de l’élément relativement au curseur.
-For instance, if we start dragging by the edge of the ball, then the cursor should remain over the edge while dragging.
+Par exemple, si nous commençons le glissement par le rebord de la balle, alors le curseur doit rester sur le rebord pendant le déplacement.
-1. When a visitor presses the button (`mousedown`) -- we can remember the distance from the cursor to the left-upper corner of the ball in variables `shiftX/shiftY`. We should keep that distance while dragging.
+1. Lorsqu’un visiteur appuye sur le bouton (`mousedown`) – nous pouvons garder en mémoire la distance du curseur au coin gauche en haut de la balle dans des variables `shiftX/shiftY`. Nous devons garder cette distance en faisant le glissement.
- To get these shifts we can substract the coordinates:
+ Pour obtenir ces changements nous pouvons soustraire les coordonnées:
```js
// onmousedown
@@ -119,16 +119,16 @@ For instance, if we start dragging by the edge of the ball, then the cursor shou
let shiftY = event.clientY - ball.getBoundingClientRect().top;
```
-2. Then while dragging we position the ball on the same shift relative to the pointer, like this:
+2. Ensuite pendant qu’on fait le glissement nous positionnons la balle sur le même changement relativement au curseur, ainsi:
```js
// onmousemove
- // ball has position:absoute
+ // la balle a un positionnement position:absoute
ball.style.left = event.pageX - *!*shiftX*/!* + 'px';
ball.style.top = event.pageY - *!*shiftY*/!* + 'px';
```
-The final code with better positioning:
+Le code final avec un meilleur positionnement:
```js
ball.onmousedown = function(event) {
@@ -144,8 +144,8 @@ ball.onmousedown = function(event) {
moveAt(event.pageX, event.pageY);
- // moves the ball at (pageX, pageY) coordinates
- // taking initial shifts into account
+ // Déplace la balle aux cordonnées (pageX, pageY)
+ // Prenant en compte les changements initiaux
function moveAt(pageX, pageY) {
ball.style.left = pageX - *!*shiftX*/!* + 'px';
ball.style.top = pageY - *!*shiftY*/!* + 'px';
@@ -155,10 +155,10 @@ ball.onmousedown = function(event) {
moveAt(event.pageX, event.pageY);
}
- // move the ball on mousemove
+ // déplace la balle à l’évènement mousemove
document.addEventListener('mousemove', onMouseMove);
- // drop the ball, remove unneeded handlers
+ // dépose la balle, enlève les gestionnaires d’évènements dont on a pas besoin
ball.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
ball.onmouseup = null;
@@ -172,30 +172,29 @@ ball.ondragstart = function() {
```
```online
-In action (inside `