Edit in JSFiddle

Result
JavaScript
HTML
CSS

$("#draggable").resizable({containment: '#parent'}).draggable(
    {
        containment: '#parent',
        drag: function(e, ui) {
            var zoomScale = 0.8;
    
            // scale the delta by the zoom factor
            var dx = ui.position.left - ui.originalPosition.left;
            var dy = ui.position.top - ui.originalPosition.top;
    
            ui.position.left = ui.originalPosition.left + dx / zoomScale;
            ui.position.top = ui.originalPosition.top + dy / zoomScale;
        }
    }
);

<body>
    <div id="parent">
        <div id="draggable">
            Hello!
        </div>
    </div>
</body>

#parent {
    background-color: blue;
    width: 400px;
    height: 400px;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform-origin: center top 0px;
    -moz-transform-origin: center top 0px;
    -webkit-transform-origin: center top 0px;
}

#draggable {
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
    width: 50px;
    height: 50px;
    color: white;
}