HTML 可拖动圆角 Div 盒子：带有动画过渡效果

<!DOCTYPE html>
<html>
<head>
    <title>Draggable Div with Rounded Corners and Animation Transition</title>
    <style>
        .draggable-div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #f1f1f1;
            border-radius: 10px;
            cursor: move;
            transition: 0.3s;
        }
<pre><code>    .draggable-div:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
&lt;/style&gt;
&lt;script&gt;
    window.onload = function () {
        var draggableDiv = document.getElementById(&quot;draggableDiv&quot;);
        var offsetX = 0;
        var offsetY = 0;
        var isDragging = false;

        draggableDiv.addEventListener(&quot;mousedown&quot;, function (event) {
            isDragging = true;
            offsetX = event.clientX - draggableDiv.offsetLeft;
            offsetY = event.clientY - draggableDiv.offsetTop;
        });

        document.addEventListener(&quot;mousemove&quot;, function (event) {
            if (!isDragging) return;
            event.preventDefault();

            var newX = event.clientX - offsetX;
            var newY = event.clientY - offsetY;

            draggableDiv.style.left = newX + &quot;px&quot;;
            draggableDiv.style.top = newY + &quot;px&quot;;
        });

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

        draggableDiv.addEventListener(&quot;transitionend&quot;, function () {
            draggableDiv.style.boxShadow = &quot;&quot;;
        });
    }
&lt;/script&gt;
</code></pre>
</head>
<body>
    <div id="draggableDiv" class="draggable-div"></div>
</body>
</html>