Beregning av riktig draposisjon med Translate og Scale i JavaScript

Administrer dra og slipp med skalering i JavaScript

Å bygge en jevn og responsiv dra-og-slipp-opplevelse kan være utfordrende, spesielt når transformasjoner som skalering er involvert. Hvis du bruker transform: translate() egenskap for å flytte elementer, vil det å legge til en skala til elementet påvirke dets størrelse og plassering, noe som fører til at beregninger går i stykker.

I dette scenariet vil bare justering av posisjonen ved hjelp av musens bevegelseskoordinater ikke gi det forventede resultatet, siden det skalerte elementet ikke lenger beveger seg som det ville gjort i sin opprinnelige størrelse. Dette forårsaker problemer ved beregning av elementets riktige plassering under dra.

Enten du bygger et tilpasset dra-og-slipp-bibliotek eller integrerer denne funksjonaliteten i prosjektet ditt, er det avgjørende å forstå hvordan du beregner posisjoner riktig når skalering brukes. Du må justere koden for å ta hensyn til skalaverdien for å sikre nøyaktig elementplassering.

Denne artikkelen vil forklare hvordan du beregner riktig posisjon til et element mens du drar, ved å bruke oversette metode i JavaScript, med skalering brukt. Vi vil også gå gjennom trinnene og formlene du trenger for å justere for elementets skala og sikre jevn draytelse.

Forstå hvordan du håndterer elementposisjon med Translate og Scale

Skriptene som presenteres tar sikte på å løse et vanlig problem i dra-og-slipp-funksjonalitet når du bruker oversette metode i JavaScript, spesielt når elementet har en skaleringstransformasjon brukt. Det første skriptet lytter etter pekerhendelser for å spore brukerens dra-interaksjoner. Ved å bruke getBoundingClientRect() metoden, beregner den elementets opprinnelige posisjon på skjermen. Dette er viktig for å bestemme hvor elementet er plassert i forhold til visningsporten, spesielt når skalaen ikke er 1, noe som gjør at elementet oppfører seg annerledes enn dets opprinnelige størrelse.

Kjernefunksjonaliteten håndteres innenfor dragElement funksjon, som beregner bevegelsesdeltaet. Drabevegelsen justeres ved å dele pekerens bevegelse med skaleringsfaktoren for å sikre at avstanden blir nøyaktig kartlagt selv når elementet forstørres eller krympes. Denne metoden bidrar til å forhindre at elementet "hopper" eller blir feilplassert under draoperasjoner. Skriptet bruker deretter disse justeringene gjennom transform-egenskapen, ved å bruke både oversett- og skaleringsfunksjonene i tandem. Dette sikrer at elementet beveger seg flytende samtidig som det opprettholder sin transformerte størrelse.

En ekstra utfordring som tas opp i skriptet er å sikre at drag-hendelsen blir ryddet opp på riktig måte. Etter at dra-handlingen er fullført, fjernes hendelseslyttere ved hjelp av fjernEventListener for å unngå minnelekkasjer og utilsiktet oppførsel. Dette garanterer at skriptet bare reagerer når det er nødvendig, og gir bedre ytelse og brukervennlighet. Videre er bruken av setProperty() metoden tillater dynamiske justeringer av CSS-variabler, noe som øker fleksibiliteten i hvordan dra-interaksjonene kan styles eller tilpasses uten hardkoding av verdier i JavaScript.

I den alternative løsningen er bruk av enhetstester med console.assert() legger til et ekstra lag med validering til implementeringen. Dette bidrar til å sikre at beregningene fungerer som forventet, spesielt i skalerte miljøer. Ved å teste resultatet av draoperasjonen mot forhåndsdefinerte forhold, sikrer skriptet at det håndterer kantsaker som ujevn skalering eller forskjellige forhåndsinnstilte forskyvninger. Denne tilnærmingen forbedrer ikke bare robustheten til dra-og-slipp-funksjonaliteten, men gjør også koden mer modulær og gjenbrukbar i ulike sammenhenger.

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

Håndtere elementskalering i dra-og-slipp-funksjonalitet

Når det gjelder å utvikle et robust dra-og-slipp-grensesnitt, er det avgjørende å forstå hvordan man håndterer transformasjoner som skalering. Vanligvis når et element dras ved hjelp av oversette funksjon i JavaScript, kan den flyttes basert på musens koordinater. Men når elementet skaleres ved hjelp av transform: skala() egenskap, dens størrelse og bevegelse endres i forhold til de opprinnelige dimensjonene. Nøkkelen til å beregne riktig posisjon er å sikre at posisjonen er justert for skaleringsfaktoren. Å ignorere skalaen vil føre til feil plassering og ujevn oppførsel.

For å håndtere skalering på riktig måte, må du dele avstanden elementet beveger seg med skalaverdien. Dette sikrer at elementet beveger seg proporsjonalt med markøren, selv når størrelsen økes eller reduseres. Bruker getBoundingClientRect() hjelper deg med å måle de nåværende dimensjonene til elementet og beregne forskyvninger basert på visningsportens posisjon. Disse forskyvningene er avgjørende for å plassere elementet nøyaktig når du drar. Dessuten, ved å justere bevegelsesdeltaene for å ta hensyn til skalaen, unngår du problemer som at elementet beveger seg for fort eller sakte i forhold til markøren.

I tillegg tillater modularisering av dra-og-slipp-funksjonaliteten gjenbruk i ulike sammenhenger. Denne modulære tilnærmingen kan utvides til å håndtere flere elementer, forskjellige skalaer og til og med brukerdefinerte forskyvninger. Bruken av hendelseslyttere liker addEventListener() sikrer at dragatferden er konsistent på tvers av forskjellige inndatatyper, for eksempel mus, berøring eller penn. Ved å håndtere både skalering og posisjonering med presisjon, sikrer du at dra-og-slipp-grensesnittet forblir intuitivt og jevnt, uavhengig av hvordan elementet transformeres.