可以在浏览器中拖拽的 <div> 元素-前端-E先生的博客

要创建一个可以在浏览器中拖拽的 <div> 元素，并将其起始位置靠右剧中，可以按照以下步骤进行操作：

创建一个 HTML 文件，其中包含一个 <div> 元素，该元素将作为可拖拽的对象。将其起始位置靠右剧中，可以使用 CSS 来实现。在 <div> 元素上添加一个 id 属性，以便稍后在 JavaScript 中获取它。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可拖拽的 DIV</title>
    <style>
        #base {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            cursor: grab; /* 添加拖拽光标样式 */
        }
    </style>
</head>
<body>
    <div id="base"></div>
    <script src="script.js"></script>
</body>
</html>

创建一个 JavaScript 文件（例如 script.js），以处理拖拽功能。在 JavaScript 文件中，获取到要拖拽的 <div> 元素，然后添加拖拽事件处理程序。

const draggableElement = document.getElementById('base');
let offsetX, offsetY, isDragging = false;
draggableElement.addEventListener('mousedown', (e) => {
    isDragging = true;
    // 计算鼠标点击位置相对于元素左上角的偏移
    offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
    offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
    draggableElement.style.cursor = 'grabbing'; // 更改拖拽中的光标样式
});
document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    // 计算元素新的位置
    const left = e.clientX - offsetX;
    const top = e.clientY - offsetY;
    // 设置元素的新位置
    draggableElement.style.left = left + 'px';
    draggableElement.style.top = top + 'px';
});
document.addEventListener('mouseup', () => {
    isDragging = false;
    draggableElement.style.cursor = 'grab';
});

这段 JavaScript 代码监听了鼠标的 mousedown、mousemove 和 mouseup 事件，以实现拖拽功能。当鼠标按下时，它记录了鼠标点击位置相对于元素左上角的偏移，然后在鼠标移动时更新元素的位置。当释放鼠标按钮时，拖拽操作停止。

以上代码会使位于右上角的 <div> 变成可拖拽的对象。你可以根据需要修改 <div> 的样式和大小以及拖拽的行为。