Как это сделать с jquery и draggable я не знаю
Но в принципе идея верная. Но надо на главный div вешать события mousedown, mousemove, mouseup и по ним двигать фон
Как то так получается
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
img {
position: absolute;
display: block;
width: 300px;
left: 150px;
top: 100px;
}
canvas {
position: absolute;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', async () => {
let par, fon, okno;
const imgloaded = (img) => {
return new Promise ((res, rej) => {
if (img.complete) res (img)
img.onload = () => res (img)
})
}
const drawokno = () => {
const ctx = okno.getContext('2d')
const w = okno.offsetWidth;
const h = okno.offsetHeight;
ctx.fillStyle = '#c0c0c0';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(w, 0);
ctx.lineTo(w, h);
ctx.lineTo(0, h);
ctx.lineTo(0, 0);
ctx.arc(w/2, h/2, h/2, 0, Math.PI * 2, true);
ctx.fill('nonzero');
}
const drag = () => {
let x, y;
const msmove = (ev) => {
let dx = ev.clientX - x;
let dy = ev.clientY - y;
fon.style.left = parseFloat(getComputedStyle(fon).left) + dx +'px';
fon.style.top = parseFloat(getComputedStyle(fon).top) + dy +'px';
x += dx;
y += dy;
ev.preventDefault()
}
const msup = (ev) => {
par.removeEventListener ('mousemove', msmove)
par.removeEventListener ('mouseup', msup)
}
par.addEventListener ('mousedown', (ev) => {
const cr = fon.getBoundingClientRect()
x = ev.clientX;
y = ev.clientY;
if (x < cr.left || cr.right < x || y < cr.top || cr.bottom < y) return;
par.addEventListener ('mousemove', msmove)
par.addEventListener ('mouseup', msup)
ev.preventDefault()
})
}
fon = document.getElementById('fon')
par = document.getElementById('par')
okno = document.getElementById('okno')
await imgloaded (fon)
let fonst = getComputedStyle(fon)
okno.style.left = fonst.left;
okno.style.top = fonst.top;
okno.width = parseFloat(fonst.width);
okno.height = parseFloat(fonst.height);
drawokno ()
drag ()
})
</script>
</head>
<body>
<div id='par'>
<img src="https://images.aif.ru/011/938/71c8b30142a321f2696bbf49a635d1c2.jpg" id="fon">
<canvas id='okno'></canvas>
</body>
</html>