Výpočet správné pozice tažení pomocí překladu a měřítka v JavaScriptu

Správa Drag and Drop pomocí škálování v JavaScriptu

Vytváření plynulého a citlivého zážitku přetahováním může být náročné, zvláště pokud jde o transformace, jako je škálování. Pokud používáte transform: translate() vlastnost přesunout prvky, přidání měřítka k prvku ovlivní jeho velikost a polohu, což způsobí přerušení výpočtů.

V tomto scénáři jednoduchá úprava polohy pomocí souřadnic pohybu myši nepřinese očekávaný výsledek, protože se změněný prvek již nepohybuje tak, jak by se pohyboval ve své původní velikosti. To způsobuje problémy při výpočtu správnou polohu prvku během tažení.

Ať už vytváříte vlastní knihovnu typu drag-and-drop nebo integrujete tuto funkci do svého projektu, pochopení, jak správně vypočítat pozice při použití škálování, je zásadní. Musíte upravit kód tak, aby zohlednil hodnotu měřítka, abyste zajistili přesné umístění prvků.

Tento článek vysvětlí, jak vypočítat správnou polohu prvku při přetahování pomocí přeložit metoda v JavaScriptu s aplikovaným měřítkem. Projdeme si také kroky a vzorce, které potřebujete upravit pro měřítko prvku a zajistit hladký výkon tažení.

Porozumění tomu, jak zacházet s pozicí prvku pomocí překladu a měřítka

Prezentované skripty mají za cíl vyřešit běžný problém s funkcí přetahování při použití přeložit metoda v JavaScriptu, zejména pokud má prvek použitou transformaci měřítka. První skript naslouchá událostem ukazatele, aby mohl sledovat interakce uživatele s přetažením. Pomocí getBoundingClientRect() metoda vypočítá počáteční polohu prvku na obrazovce. To je nezbytné pro určení, kde je prvek umístěn vzhledem k výřezu, zvláště když měřítko není 1, což způsobuje, že se prvek chová odlišně od své původní velikosti.

Základní funkčnost je řešena v rámci dragElement funkce, která vypočítá pohyb delta. Pohyb tažení se upravuje vydělením pohybu ukazatele faktorem měřítka, aby bylo zajištěno přesné mapování vzdálenosti, i když je prvek zvětšen nebo zmenšen. Tato metoda pomáhá zabránit tomu, aby prvek "přeskakoval" nebo byl nesprávně umístěn během operací přetažení. Skript poté aplikuje tyto úpravy prostřednictvím vlastnosti transform, pomocí obou funkcí translate a scale v tandemu. To zajišťuje, že se prvek pohybuje plynule při zachování jeho transformované velikosti.

Další výzvou, kterou skript řeší, je zajištění správného vyčištění události přetažení. Po dokončení akce přetažení jsou posluchače událostí odstraněny pomocí removeEventListener aby se zabránilo únikům paměti a nezamýšlenému chování. To zaručuje, že skript reaguje pouze v případě potřeby a poskytuje lepší výkon a použitelnost. Dále použití setProperty() Tato metoda umožňuje dynamické úpravy proměnných CSS, čímž se zvyšuje flexibilita v tom, jak mohou být interakce tažení stylizovány nebo přizpůsobeny bez pevného kódování hodnot do JavaScriptu.

V alternativním řešení je použití jednotkových testů s console.assert() přidává k implementaci další vrstvu ověřování. To pomáhá zajistit, aby výpočty fungovaly podle očekávání, zejména ve škálovaných prostředích. Testováním výsledku operace tažení proti předem definovaným podmínkám skript zajišťuje, že zvládá okrajové případy, jako je nerovnoměrné škálování nebo různé přednastavené offsety. Tento přístup nejen zlepšuje robustnost funkce drag-and-drop, ale také činí kód modulárnějším a opakovaně použitelným v různých kontextech.

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();

Manipulace se změnou měřítka prvků ve funkci Drag-and-Drop

Pokud jde o vývoj robustního rozhraní přetahování, je zásadní pochopit, jak zacházet s transformacemi, jako je škálování. Obvykle, když je prvek přetažen pomocí přeložit funkce v JavaScriptu, lze jej přesouvat na základě souřadnic myši. Když je však prvek zmenšen pomocí transform: scale() vlastnost, její velikost a pohyb se mění vzhledem k původním rozměrům. Klíčem k výpočtu správné polohy je zajistit, aby byla poloha přizpůsobena faktoru měřítka. Ignorování váhy povede k nesprávnému umístění a nevypočitatelnému chování.

Abyste správně zvládli změnu měřítka, musíte vydělit vzdálenost, o kterou se prvek posune, hodnotou měřítka. To zajišťuje, že se prvek pohybuje proporcionálně s kurzorem, i když se jeho velikost zvětšuje nebo zmenšuje. Použití getBoundingClientRect() vám pomůže změřit aktuální rozměry prvku a vypočítat offsety na základě polohy výřezu. Tyto posuny jsou klíčové pro přesné umístění prvku při tažení. Navíc nastavením delt pohybu podle měřítka se vyhnete problémům, jako je pohyb prvku příliš rychle nebo pomalu vzhledem ke kurzoru.

Modularizace funkce přetažení navíc umožňuje opětovné použití v různých kontextech. Tento modulární přístup lze rozšířit tak, aby zpracovával více prvků, různá měřítka a dokonce i uživatelem definované offsety. Využití posluchačů událostí jako addEventListener() zajišťuje, že chování tažení je konzistentní u různých typů vstupu, jako je myš, dotyk nebo pero. Přesným zacházením se změnou měřítka a umístěním zajistíte, že rozhraní přetažení zůstane intuitivní a plynulé, bez ohledu na to, jak se prvek transformuje.