Draggable (and Resizable) <div> using jQuery

Resources for a tutorial by Benedict Lewis.

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <button id="btn">Zoom in</button>
    <div id="wrapper" style="background-color:aliceblue;padding:50px;">
        <div id="innerWrapper" style="background-color: ivory; min-height: 200px; width: 400px; ">
            <div id="draggable" style="background-color:burlywood;max-width:100px;">Move me</div>
        </div>
    </div>

JavaScript

$("#draggable").draggable({containment:"#innerWrapper"});  

        const btn = document.getElementById("btn");
        btn.addEventListener("click", zoom);

        function zoom() {
            document.getElementById("innerWrapper").style.transform = "scale(1.2,1.2)";
        }