用鼠标指针拖动水平标尺上的列标记

涛哥
Html代码

以下用鼠标指针拖动水平标尺上的列标记示例代码实现的需求是在一个水平标尺上添加一个列标记，并且允许用户使用鼠标拖动该列标记，以调整其位置。该需求可以通过使用 HTML、CSS 和 JavaScript 技术来实现，在 HTML 中创建水平标尺和列标记元素，使用 CSS 来设置它们的样式，然后使用 JavaScript 监听鼠标事件，并根据用户的操作来调整列标记的位置。该功能通常用于数据表格、电子表格等需要动态调整列宽的场景中，提高用户体验和操作效率。

要实现拖动水平标尺上的列标记的功能，您可以使用 JavaScript 和 CSS 来完成。以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .ruler {
            position: relative;
            width: 100%;
            height: 50px;
            background-color: #eee;
            border-bottom: 1px solid #999;
        }
        .column-marker {
            position: absolute;
            top: 0;
            width: 2px;
            height: 100%;
            background-color: red;
            cursor: col-resize;
            z-index: 1;
        }
    </style>
</head>
<body>
    <h2>拖动列标记</h2>
    <div class="ruler" onmousemove="dragColumn(event);">
        <div id="column-marker" class="column-marker" style="left: 20%;"></div>
    </div>

    <script>
        var columnMarker = document.getElementById('column-marker');
        var isDragging = false;
        var startX, startLeft;

        function dragColumn(event) {
            event.preventDefault();
            if (isDragging) {
                var newLeft = startLeft + event.clientX - startX;
                newLeft = Math.max(newLeft, 0); // 防止左边界超出范围
                newLeft = Math.min(newLeft, columnMarker.parentNode.offsetWidth); // 防止右边界超出范围
                columnMarker.style.left = newLeft + 'px';
            }
        }

        columnMarker.addEventListener('mousedown', function (event) {
            event.preventDefault();
            isDragging = true;
            startX = event.clientX;
            startLeft = columnMarker.offsetLeft;
        });

        document.addEventListener('mouseup', function () {
            isDragging = false;
        });
    </script>
</body>
</html>

在这个用鼠标指针拖动水平标尺上的列标记示例代码中，我们首先定义了一个 ruler 类的 CSS 样式，用于设置水平标尺的样式；同时定义了一个 column-marker 类的样式，用于设置列标记的样式。其中，column-marker 元素使用了 position: absolute; 属性，可以根据鼠标拖动进行位置调整。

接下来，在 HTML 中创建一个 ruler 容器，以及一个 column-marker 元素。在 JavaScript 中，我们获取到 column-marker 元素，并设置 mousedown 事件处理程序，当用户按下鼠标时开始拖动。在拖动过程中，我们通过监听 mousemove 事件，不断更新 column-marker 元素的位置；同时通过 mouseup 事件，结束拖动操作。

请注意，在拖动过程中需要防止左右边界超出范围，我们可以通过一些简单的计算和条件判断来实现。

 
  • 指针