79106771

Date: 2024-10-20 10:04:25
Score: 1
Natty:
Report link

As I did not get any response, I tried to solve it myself. I also found a working solution which I have added in the codepen link.

Here is the link to the working solution - https://codepen.io/gokunik/pen/YzmqQJV

Below is a small snippet

function onPointerDown(e, element) {
  const originalRect = element.getBoundingClientRect();
  const rect = scaleRect(element.getBoundingClientRect(), scale);

  initialCoords = {
    x:
      e.clientX +
      (rect.right - e.clientX) +
      (e.clientX - originalRect.right) * scale,
    y:
      e.clientY +
      (rect.bottom - e.clientY) +
      (e.clientY - originalRect.bottom) * scale,
  };
  draggedPreview = element;
  translateDragPreview(e.clientX, e.clientY);
}

Approach used to solve the question.

I used a simple approach. I initially thought about this while solving this but did not pursue it then but it worked when I tried it now.

So the idea is the element is scaled down when it is dragged so it's either shrinks or increases in size, changing it's rect values like x, y, top, left etc which displaces the dragged element which needs to be adjusted. So first I added a function to give me a updated rect for a element when scaling is applied. Now I have the rect of both original and dragged scaled element.

If you notice in the screenshot I have shared, the scaled element shrinks and increases in size by maintaining it's centre with the original element so first I tried to align the scaled element edges with the initial point of click using (rect.right - e.clientX) and (rect.bottom - e.clientY) which just aligned the element to the bottom right corner.

Now All I had to do is to find where the click has happened in the original rect and scale it down for the updated scaled rect. So I repeated the same same thing and multiply it with the scale value (e.clientX - originalRect.right) * scale and (e.clientY - originalRect.bottom) * scale so it adjust it according to the scaled element.

I hope you find this helpful. I did not find the answer to this problem no where on the internet that's why I'm sharing it here.

Reasons:
  • Blacklisted phrase (1): Here is the link
  • Whitelisted phrase (-1): it worked
  • Contains signature (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: GokuNik