Drag'n'drop with mouse events by abdouse79 · Pull Request #55 · javascript-tutorial/fr.javascript.info
// 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;
// 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;
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;
}); });