When you scale down the container, two things happen:

1. The container size becomes smaller than the viewport, causing an offset in the mouse position that isn't corrected.
2. The units for the top/left CSS properties are now half as big, which also isn't corrected for.

To fix this, we have to calculate the offset of the parent container relative to the viewport and pass that value into your <Draggable> component. We also need to pass in the scale value that we are using.

<!-- App.svelte -->
<script>
  import {onMount} from "svelte"
    import Draggable from "./Draggable.svelte"
    
    let parent;
    let parentOffset = {x: 0, y:0}
    
    onMount(() => {
        let rect = parent.getBoundingClientRect()
        parentOffset = {x: rect.x, y: rect.y}
    })
</script>

<style>
    .box {
        background: red;
        width: 150px;
        height: 150px;
    }
    
    .container {
        transform: scale(0.5);
    }
</style>

<div class="container" bind:this={parent}>
    <Draggable {parentOffset} scale={0.5}>
        <div class="box"/>
    </Draggable>
    
    <Draggable posY={250} {parentOffset} scale={0.5}>
        <div class="box"/>
    </Draggable>
</div>

<!-- Draggable.svelte -->
<script>
    export let posX = 0
    export let posY = 0
        
        export let parentOffset;
      export let scale;

    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) {
            // new math! we subtract the parent offset to correct the parent shift
            // and also divide by the scale to correct the scale multiplication
            posX = ((e.pageX - offsetX)-parentOffset.x)/scale
            posY = ((e.pageY - offsetY)-parentOffset.y)/scale
        }
    }
</script>

<style>
    .draggable {
        user-select: none;
        position: absolute;
        cursor: grab;
    }

    .draggable:active {
        cursor: grabbing;
    }
</style>

<svelte:window on:mouseup={dragStop} on:mousemove={dragMove} />

<div
    on:mousedown={dragStart}
    style="top: {posY}px; left: {posX}px;"
    class="draggable"
>
    <slot/>
</div>

New REPL: https://svelte.dev/repl/9ec1a1598e8f407e8ec807dbb8a4d92b?version=3.42.5