Beräkna korrekt dragposition med Translate och Scale i JavaScript

Hantera dra och släpp med skalning i JavaScript

Att bygga en smidig och lyhörd dra-och-släpp-upplevelse kan vara utmanande, särskilt när transformationer som skalning är inblandade. Om du använder transform: translate() egenskap för att flytta element, kommer att lägga till en skala till elementet att påverka dess storlek och position, vilket gör att beräkningar går sönder.

I det här scenariot kommer det inte att ge det förväntade resultatet att justera positionen med hjälp av musens rörelsekoordinater, eftersom det skalade elementet inte längre rör sig som det skulle göra i sin ursprungliga storlek. Detta orsakar problem vid beräkning av elementets korrekta position under draget.

Oavsett om du bygger ett anpassat dra-och-släpp-bibliotek eller integrerar den här funktionen i ditt projekt, är det avgörande att förstå hur man korrekt beräknar positioner när skalning tillämpas. Du måste justera din kod för att ta hänsyn till skalvärdet för att säkerställa korrekt elementplacering.

Den här artikeln kommer att förklara hur man beräknar den korrekta positionen för ett element medan du drar, med hjälp av översätta metod i JavaScript, med skalning tillämpad. Vi går också igenom stegen och formlerna du behöver för att justera för elementets skala och säkerställa smidig dragprestanda.

Förstå hur man hanterar elementposition med Translate och Scale

Skripten som presenteras syftar till att lösa ett vanligt problem i dra-och-släpp-funktioner när du använder översätta metod i JavaScript, särskilt när elementet har en skalningstransformation tillämpad. Det första skriptet lyssnar efter pekarhändelser för att spåra användarens draginteraktioner. Genom att använda getBoundingClientRect() metoden, beräknar den elementets initiala position på skärmen. Detta är viktigt för att avgöra var elementet är placerat i förhållande till visningsporten, särskilt när skalan inte är 1, vilket gör att elementet beter sig annorlunda än dess ursprungliga storlek.

Kärnfunktionaliteten hanteras inom dragElement funktion, som beräknar rörelsedeltat. Drarörelsen justeras genom att dividera pekarens rörelse med skalfaktorn för att säkerställa att avståndet är korrekt kartlagt även när elementet förstoras eller krymps. Den här metoden hjälper till att förhindra att elementet "hoppar" eller blir felplacerat under dragoperationer. Skriptet tillämpar sedan dessa justeringar genom transformegenskapen och använder både translate- och skalningsfunktionerna i tandem. Detta säkerställer att elementet rör sig flytande samtidigt som det behåller sin transformerade storlek.

En ytterligare utmaning som tas upp i skriptet är att se till att draghändelsen rensas upp ordentligt. När dragåtgärden är klar tas händelseavlyssnare bort med removeEventListener för att undvika minnesläckor och oavsiktligt beteende. Detta garanterar att skriptet bara svarar när det behövs, vilket ger bättre prestanda och användbarhet. Dessutom kan användningen av setProperty() Metoden möjliggör dynamiska justeringar av CSS-variabler, vilket ökar flexibiliteten i hur drag-interaktionerna kan utformas eller anpassas utan att hårdkoda värden i JavaScript.

I den alternativa lösningen, användandet av enhetstester med console.assert() lägger till ett extra lager av validering till implementeringen. Detta hjälper till att säkerställa att beräkningarna fungerar som förväntat, särskilt i skalade miljöer. Genom att testa resultatet av dragoperationen mot fördefinierade villkor säkerställer skriptet att det hanterar kantfall som olikformig skalning eller olika förinställda offset. Detta tillvägagångssätt förbättrar inte bara robustheten hos dra-och-släpp-funktionen utan gör också koden mer modulär och återanvändbar i olika sammanhang.

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

Hantera elementskalning i dra-och-släpp-funktionalitet

När det gäller att utveckla ett robust dra-och-släpp-gränssnitt är det avgörande att förstå hur man hanterar transformationer som skalning. Vanligtvis när ett element dras med hjälp av översätta funktion i JavaScript kan den flyttas baserat på musens koordinater. Men när elementet skalas med hjälp av transform: skala() egenskap, dess storlek och rörelse förändras i förhållande till de ursprungliga måtten. Nyckeln till att beräkna rätt position är att se till att positionen är justerad för skalningsfaktorn. Att ignorera vågen kommer att leda till felaktig positionering och oregelbundet beteende.

För att hantera skalning korrekt måste du dividera avståndet som elementet rör sig med skalvärdet. Detta säkerställer att elementet rör sig proportionellt med markören, även när dess storlek ökas eller minskas. Använder getBoundingClientRect() hjälper dig att mäta elementets aktuella dimensioner och beräkna offset baserat på visningsportens position. Dessa förskjutningar är avgörande för att placera elementet exakt när du drar. Dessutom, genom att justera rörelsedeltan för att ta hänsyn till skalan, undviker du problem som att elementet rör sig för snabbt eller långsamt i förhållande till markören.

Dessutom möjliggör modularisering av dra-och-släpp-funktionen återanvändbarhet i olika sammanhang. Detta modulära tillvägagångssätt kan utökas för att hantera flera element, olika skalor och till och med användardefinierade offset. Användningen av händelselyssnare gillar addEventListener() säkerställer att dragbeteendet är konsekvent över olika inmatningstyper, som mus, beröring eller penna. Genom att hantera både skalning och positionering med precision säkerställer du att ditt dra-och-släpp-gränssnitt förblir intuitivt och smidigt, oavsett hur elementet transformeras.