title: Why doesn't my draggable svelte work properly after scaling it?
body: <p>I have created a svelte component to allow for draggable Dom elements:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      export let posX = 0
      export let posY = 0
  
      let moving = false
      let offsetX
      let offsetY
  
      function dragStart(e) {
          const rect = e.currentTarget.getBoundingClientRect()
  
          offsetX = e.pageX - rect.left
          offsetY = e.pageY - rect.top
  
          moving = true
      }
  
      function dragStop() {
          moving = false
      }
  
      function dragMove(e) {
          if (moving) {
              posX = e.pageX - offsetX
              posY = e.pageY - offsetY
          }
      }
  &lt;/script&gt;
  
  &lt;style&gt;
      .draggable {
          user-select: none;
          position: absolute;
          cursor: grab;
      }
  
      .draggable:active {
          cursor: grabbing;
      }
  &lt;/style&gt;
  
  &lt;svelte:window on:mouseup={dragStop} on:mousemove={dragMove} /&gt;
  
  &lt;div
      on:mousedown={dragStart}
      style=&quot;top: {posY}px; left: {posX}px;&quot;
      class=&quot;draggable&quot;
  &gt;
      &lt;slot/&gt;
  &lt;/div&gt;
  </code></pre>
  <p>When I add the CSS property <code>transform: scale(0.5);</code> to a div containing draggable components the draggable components stop working as expected. Their positions get offset from the mouse position.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      import Draggable from &quot;./Draggable.svelte&quot;
  &lt;/script&gt;
  
  &lt;style&gt;
      .box {
          background: red;
          width: 150px;
          height: 150px;
      }
      
      .container {
          transform: scale(0.5);
      }
  &lt;/style&gt;
  
  &lt;div class=&quot;container&quot;&gt;
      &lt;Draggable&gt;
          &lt;div class=&quot;box&quot;/&gt;
      &lt;/Draggable&gt;
      
      &lt;Draggable posY={250}&gt;
          &lt;div class=&quot;box&quot;/&gt;
      &lt;/Draggable&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is a link to the svelte REPL: <a href="https://svelte.dev/repl/679692b94afc48b48a2a3ebd39875ea0?version=3.42.5" rel="nofollow noreferrer">https://svelte.dev/repl/679692b94afc48b48a2a3ebd39875ea0?version=3.42.5</a></p>
  <p>How would I go about fixing this?</p>
  <p>Thanks in advance!</p>