Výpočet správnej pozície ťahania pomocou prekladu a mierky v JavaScripte

Správa drag and drop pomocou zmeny veľkosti v JavaScripte

Vytváranie plynulého a citlivého zážitku presúvania myšou môže byť náročné, najmä ak ide o transformácie, ako je škálovanie. Ak používate transform: translate() vlastnosť presúvať prvky, pridanie mierky k prvku ovplyvní jeho veľkosť a polohu, čo spôsobí prerušenie výpočtov.

V tomto scenári jednoduchá úprava polohy pomocou súradníc pohybu myši neprinesie očakávaný výsledok, pretože zmenený prvok sa už nepohybuje tak, ako by sa pohyboval vo svojej pôvodnej veľkosti. To spôsobuje problémy pri výpočte správnu polohu prvku počas ťahania.

Či už vytvárate vlastnú knižnicu drag-and-drop alebo integrujete túto funkciu do svojho projektu, pochopenie, ako správne vypočítať pozície pri použití škálovania, je kľúčové. Musíte upraviť kód tak, aby zohľadnil hodnotu mierky, aby ste zaistili presné umiestnenie prvkov.

Tento článok vysvetlí, ako vypočítať správnu polohu prvku pri ťahaní pomocou preložiť metóda v JavaScripte s aplikovanou mierkou. Prejdeme si aj kroky a vzorce, ktoré musíte upraviť pre mierku prvku a zabezpečiť hladký výkon ťahania.

Pochopte, ako zvládnuť pozíciu prvku pomocou prekladu a mierky

Cieľom prezentovaných skriptov je vyriešiť bežný problém s funkciou drag-and-drop pri používaní preložiť v JavaScripte, najmä ak má prvok aplikovanú transformáciu mierky. Prvý skript počúva udalosti ukazovateľa, aby mohol sledovať interakcie používateľa s ťahaním. Pomocou getBoundingClientRect() vypočíta počiatočnú polohu prvku na obrazovke. Je to nevyhnutné na určenie polohy prvku vzhľadom na výrez, najmä ak mierka nie je 1, čo spôsobuje, že sa prvok správa odlišne od jeho pôvodnej veľkosti.

Základná funkcia je spracovaná v rámci dragElement funkcia, ktorá vypočítava delta pohybu. Pohyb ťahu sa upravuje vydelením pohybu ukazovateľa mierkou, aby sa zabezpečilo presné mapovanie vzdialenosti, aj keď je prvok zväčšený alebo zmenšený. Táto metóda pomáha predchádzať tomu, aby prvok "skákal" alebo bol nesprávne umiestnený počas operácií ťahania. Skript potom použije tieto úpravy prostredníctvom vlastnosti transform, pričom použije funkcie preložiť aj škálovanie v tandeme. To zaisťuje, že sa prvok pohybuje plynule, pričom si zachováva svoju transformovanú veľkosť.

Ďalšou výzvou riešenou v skripte je zabezpečenie správneho vyčistenia udalosti ťahania. Po dokončení akcie potiahnutia sa poslucháči udalostí odstránia pomocou removeEventListener aby sa predišlo úniku pamäte a neúmyselnému správaniu. To zaručuje, že skript reaguje iba v prípade potreby a poskytuje lepší výkon a použiteľnosť. Okrem toho použitie setProperty() Metóda umožňuje dynamické úpravy premenných CSS, čím sa zvyšuje flexibilita v spôsobe, akým môžu byť interakcie ťahaním štylizované alebo prispôsobené bez pevného kódovania hodnôt do JavaScriptu.

V alternatívnom riešení je použitie jednotkových testov s console.assert() pridáva do implementácie ďalšiu vrstvu validácie. To pomáha zabezpečiť, aby výpočty fungovali podľa očakávania, najmä v škálovaných prostrediach. Testovaním výsledku operácie ťahania proti vopred definovaným podmienkam skript zaisťuje, že zvládne okrajové prípady, ako je nerovnomerné škálovanie alebo rôzne prednastavené posuny. Tento prístup nielen zlepšuje robustnosť funkcie drag-and-drop, ale tiež robí kód modulárnejším a opakovane použiteľným v rôznych kontextoch.

let startX, startY, initialX, initialY, scale = 1;
const draggable = document.getElementById('draggable');
draggable.addEventListener('pointerdown', startDrag);

function startDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  const rect = draggable.getBoundingClientRect();
  initialX = rect.left;
  initialY = rect.top;
  document.addEventListener('pointermove', dragElement);
  document.addEventListener('pointerup', stopDrag);
}

function dragElement(e) {
  const deltaX = (e.clientX - startX) / scale;
  const deltaY = (e.clientY - startY) / scale;
  draggable.style.transform = `translate(${initialX + deltaX}px, ${initialY + deltaY}px) scale(${scale})`;
}

function stopDrag() {
  document.removeEventListener('pointermove', dragElement);
  document.removeEventListener('pointerup', stopDrag);
}

let startX, startY, initialX, initialY, scale = 1;
const draggable = document.getElementById('draggable');
draggable.addEventListener('pointerdown', startDrag);

function startDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  const rect = draggable.getBoundingClientRect();
  initialX = rect.left / scale;
  initialY = rect.top / scale;
  document.addEventListener('pointermove', dragElement);
  document.addEventListener('pointerup', stopDrag);
}

function dragElement(e) {
  const deltaX = (e.clientX - startX) / scale;
  const deltaY = (e.clientY - startY) / scale;
  draggable.style.setProperty('--x', initialX + deltaX + 'px');
  draggable.style.setProperty('--y', initialY + deltaY + 'px');
}

function stopDrag() {
  document.removeEventListener('pointermove', dragElement);
  document.removeEventListener('pointerup', stopDrag);
}

function testDragWithScale() {
  const element = document.createElement('div');
  element.style.width = '100px';
  element.style.height = '100px';
  element.style.transform = 'scale(2)';
  document.body.appendChild(element);
  startDrag({clientX: 100, clientY: 100});
  dragElement({clientX: 200, clientY: 200});
  const computedTransform = getComputedStyle(element).transform;
  console.assert(computedTransform.includes('translate(50px, 50px)'), 'Position adjusted correctly with scale');
}

testDragWithScale();

Spracovanie zmeny mierky prvkov pomocou funkcie Drag-and-Drop

Pokiaľ ide o vývoj robustného rozhrania drag-and-drop, pochopenie toho, ako zvládnuť transformácie, ako je škálovanie, je kľúčové. Zvyčajne, keď sa prvok pretiahne pomocou preložiť v JavaScripte, možno ho presúvať na základe súradníc myši. Keď je však prvok škálovaný pomocou transform: scale() vlastnosť, jej veľkosť a pohyb sa menia vzhľadom na pôvodné rozmery. Kľúčom k výpočtu správnej polohy je zabezpečiť, aby bola poloha upravená pre faktor mierky. Ignorovanie váhy povedie k nesprávnemu umiestneniu a nepravidelnému správaniu.

Ak chcete správne zvládnuť zmenu mierky, musíte vydeliť vzdialenosť, o ktorú sa prvok posunie, hodnotou mierky. To zaisťuje, že sa prvok pohybuje proporcionálne s kurzorom, aj keď sa jeho veľkosť zväčšuje alebo zmenšuje. Používanie getBoundingClientRect() vám pomôže zmerať aktuálne rozmery prvku a vypočítať posuny na základe polohy výrezu. Tieto posuny sú rozhodujúce pre presné umiestnenie prvku pri ťahaní. Navyše, nastavením delt pohybu podľa mierky sa vyhnete problémom, ako je pohyb prvku príliš rýchlo alebo pomaly vzhľadom na kurzor.

Okrem toho modularizácia funkcie drag-and-drop umožňuje opätovné použitie v rôznych kontextoch. Tento modulárny prístup je možné rozšíriť tak, aby spracoval viacero prvkov, rôzne mierky a dokonca aj používateľom definované posuny. Využitie udalosti poslucháčov páči addEventListener() zaisťuje, že správanie ťahania je konzistentné pri rôznych typoch vstupu, ako je myš, dotyk alebo pero. Presnou manipuláciou so zmenou mierky a umiestnením zaistíte, že rozhranie pre presunutie myšou zostane intuitívne a plynulé bez ohľadu na to, ako sa prvok transformuje.