请扮演一个程序员写一个带有一个可拖动的div框的网页

<!DOCTYPE html>
<html>
<head>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="myDiv" draggable="true"></div>
<pre><code>&lt;script&gt;
    var myDiv = document.getElementById(&quot;myDiv&quot;);
    var isDragging = false;
    var offset = { x: 0, y: 0 };

    myDiv.addEventListener(&quot;mousedown&quot;, function (e) {
        isDragging = true;
        offset.x = e.clientX - myDiv.offsetLeft;
        offset.y = e.clientY - myDiv.offsetTop;
    });

    document.addEventListener(&quot;mouseup&quot;, function () {
        isDragging = false;
    });

    document.addEventListener(&quot;mousemove&quot;, function (e) {
        if (isDragging) {
            myDiv.style.left = (e.clientX - offset.x) + &quot;px&quot;;
            myDiv.style.top = (e.clientY - offset.y) + &quot;px&quot;;
        }
    });
&lt;/script&gt;
</code></pre>
</body>
</html