Index

Table of contents

jquery ui

draggable & resizable

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" media="screen" href="/web/static/style.css"/>
    <link rel="stylesheet" media="screen" href="/web/static/jquery-ui.min.css"/>
</head>
<body>

<div>
    <div class="panel" style="position: absolute;">
        <div class="title">hello</div>
        <div class="body">
            hello world
        </div>
    </div>
</div>

<script src="/web/static/jquery-3.6.0.min.js"></script>
<script src="/web/static/jquery-ui.min.js"></script>

<script>
$(".panel").each(function () {
    $(this).resizable();
    $(this).draggable({
        stack: ".panel",
        handle: ".title"
    });
});
</script>

</body>
</html>

documentation

jquery ui website
https://jqueryui.com/