解决可拖拽与可调整大小元素冲突的实战指南-html教程-PHP中文网

解决可拖拽与可调整大小元素冲突的实战指南

本教程旨在解决Web开发中可拖拽（Drag-and-Drop）与可调整大小（Resizable）元素功能冲突的问题。当用户尝试对一个同时具备这两种功能的元素进行操作时，拖拽事件往往会覆盖调整大小事件。文章通过引入鼠标位置检测机制，在拖拽事件的mousedown监听器中判断鼠标是否位于元素的调整大小区域，从而智能地分离这两个事件，确保用户能够顺畅地进行拖拽和调整大小操作。

概述

在构建交互式web界面时，我们经常需要创建可以自由移动和调整大小的元素，例如文本框、卡片等。然而，当一个元素同时具备拖拽（drag）和调整大小（resize）这两种功能时，它们之间很容易产生冲突。常见的场景是，当用户尝试点击元素的边缘来调整其大小时，却意外地触发了元素的拖拽事件，导致无法进行大小调整。这是因为拖拽通常通过监听元素的mousedown事件来启动，而调整大小（特别是浏览器原生的resize属性）也可能在类似的用户交互下被触发。

为了解决这一问题，我们需要在拖拽逻辑中引入一个判断机制，识别用户意图。如果用户点击的是元素的调整大小区域（例如右下角），则不应该启动拖拽功能，而是允许浏览器或自定义的调整大小逻辑接管。

HTML 结构

首先，我们定义一个基本的HTML结构，包含一个作为可拖拽和可调整大小容器的div，内部嵌套一个textarea元素。textarea将作为实际内容区域，并通过点击事件来切换其可调整大小的状态。

<!DOCTYPE html>
<html>
<head>
<title>可拖拽与可调整大小元素</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style type="text/css">
    /* CSS 样式将在下一节详细说明 */
</style>
</head>
<body>
    <div id="text_box1" class="move">
        <textarea 
            id="text_area1" 
            style="width:100%; height: 100%;" 
            onclick="change_editable(event)"> INSERT YOUR TEXT</textarea>
    </div>
    <script type="text/javascript">
        // JavaScript 代码将在后续章节详细说明
    </script>
</body>
</html>

登录后复制

CSS 样式

为了使元素具备拖拽和调整大小的视觉效果，我们需要定义一些CSS样式。

.move 类定义了可拖拽元素的初始位置、尺寸和背景色。position: absolute 是实现拖拽的基础。
.editable_resize 类用于切换textarea的resize属性。当这个类被添加时，textarea将变为可调整大小。
textarea 默认设置 resize: none，以确保在未启用 .editable_resize 时不可调整大小。
.isMoving 类在元素被拖拽时添加，可以用于改变其Z-index，确保拖拽时元素位于最上层。

<style type="text/css">
    /* TEXTAREA 样式 */ 
    textarea {
        background: rgba(0, 0, 0, 0.150);
        resize: none; /* 默认不可调整大小 */
        width: 100%;
        height: 100%; /* 确保填充父容器 */
        background-color: #fc0; /* 与父容器背景色一致，或根据需求设置 */
        border: none;
        padding: 5px;
        box-sizing: border-box; /* 确保padding不影响100%宽度 */
    }

    .editable_resize {
        resize: both; /* 启用水平和垂直方向的调整大小 */
        overflow: auto; /* 确保内容溢出时出现滚动条 */
    }

    /* MOVE 元素样式 */
    .move {
        position: absolute;
        z-index: 1000;
        width: 200px;
        height: 200px;
        background-color: #fc0; /* 容器背景色 */
        cursor: grab; /* 鼠标悬停时显示抓取手势 */
    }

    .isMoving {
        z-index: 1001 !important; /* 拖拽时置于顶层 */
        cursor: grabbing; /* 拖拽时显示抓取中手势 */
    }
</style>

登录后复制

JavaScript 逻辑

核心逻辑在于Dragable函数中对mousedown事件的处理。我们需要在拖拽开始前，判断鼠标点击的位置是否在元素的右下角调整大小区域内。

辅助函数 addEvent

为了兼容不同的浏览器，我们使用一个简单的addEvent函数来注册事件监听器。

function addEvent(el, type, callback) {
    if (el.addEventListener) {
        el.addEventListener(type, callback);
    } else if (el.attachEvent) {
        el.attachEvent("on" + type, callback);
    }
}

登录后复制

切换可编辑状态 change_editable

这个函数通过点击textarea来切换其editable_resize类，从而启用或禁用原生的调整大小功能。

可图大模型

可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

查看详情

function change_editable(e) {
    // 兼容不同浏览器获取事件源
    try {
        var id_element = e.srcElement.id.toString();
    } catch {
        var id_element = e.path[0].id.toString();
    }
    var element = document.getElementById(id_element);
    element.classList.toggle("editable_resize");
}

登录后复制

核心拖拽与调整大小冲突解决 Dragable

Dragable函数是实现拖拽功能的核心，也是解决冲突的关键所在。

function Dragable(el) {
    var isMove = false, // 标记是否正在拖拽
        x = 0, y = 0,   // 鼠标按下时的坐标
        xel = 0, yel = 0; // 元素左上角与鼠标按下点之间的偏移

    addEvent(el, "mousedown", e => {
        // 获取元素在视口中的位置和尺寸
        const rect = e.target.getBoundingClientRect();
        // 计算鼠标点击点相对于元素左上角的局部坐标
        const _x = e.clientX - rect.left;
        const _y = e.clientY - rect.top;

        // 关键判断：检查鼠标是否在元素的右下角调整大小区域内
        // 这里设定了一个18x18像素的区域作为调整大小的“手柄”
        if (rect.width - _x <= 18 && rect.height - _y <= 18) {
            // 如果在调整大小区域内，则不启动拖拽，直接返回
            // 允许浏览器原生或自定义的resize功能生效
            return;
        }

        // 如果不在调整大小区域内，则启动拖拽
        isMove = true;
        el.className += " isMoving"; // 添加拖拽样式

        // 获取鼠标的页面坐标
        x = window.event ? window.event.clientX : e.pageX;
        y = window.event ? window.event.clientY : e.pageY;

        // 计算鼠标点击点相对于元素左上角的偏移量
        xel = x - el.offsetLeft;
        yel = y - el.offsetTop;
    });

    addEvent(document, "mousemove", function(e) {
        if (isMove) {
            e.preventDefault(); // 阻止默认行为（如文本选择）

            // 更新鼠标的页面坐标
            x = window.event ? window.event.clientX : e.pageX;
            y = window.event ? window.event.clientY : e.pageY;

            // 根据鼠标当前位置和初始偏移量设置元素的新位置
            el.style.left = (x - xel) + 'px';
            el.style.top = (y - yel) + 'px';
        }
    });

    addEvent(document, "mouseup", function() {
        // 鼠标松开时，停止拖拽并移除拖拽样式
        el.className = String(el.className).replace(/(^|\s)isMoving(\s|$)/g, " ");
        isMove = false;
    });
}

登录后复制

初始化脚本

在页面加载完成后，遍历所有具有move类的元素并应用Dragable功能。

window.onload = function() {
    // 隐藏所有 .back_card 元素 (根据原始问题，可能不需要，但保留以保持上下文)
    let temp = document.querySelectorAll(".back_card");
    var index = 0, length = temp.length;
    for (; index < length; index++) {
       temp[index].style.display = "none";
    }

    // 为所有 .move 元素添加拖拽功能
    temp = document.querySelectorAll(".move");
    index = 0, length = temp.length;
    for (; index < length; index++) {
       Dragable(temp[index]);
    }
};

登录后复制

完整代码示例

将上述HTML、CSS和JavaScript代码整合到同一个文件中，即可得到一个完整的工作示例。

<!DOCTYPE html>
<html>
<head>
<title>可拖拽与可调整大小元素</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style type="text/css">
    /* TEXTAREA 样式 */ 
    textarea {
        background: rgba(0, 0, 0, 0.150);
        resize: none; /* 默认不可调整大小 */
        width: 100%;
        height: 100%; /* 确保填充父容器 */
        background-color: #fc0; /* 与父容器背景色一致，或根据需求设置 */
        border: none;
        padding: 5px;
        box-sizing: border-box; /* 确保padding不影响100%宽度 */
    }

    .editable_resize {
        resize: both; /* 启用水平和垂直方向的调整大小 */
        overflow: auto; /* 确保内容溢出时出现滚动条 */
    }

    /* MOVE 元素样式 */
    .move {
        position: absolute;
        z-index: 1000;
        width: 200px;
        height: 200px;
        background-color: #fc0; /* 容器背景色 */
        cursor: grab; /* 鼠标悬停时显示抓取手势 */
    }

    .isMoving {
        z-index: 1001 !important; /* 拖拽时置于顶层 */
        cursor: grabbing; /* 拖拽时显示抓取中手势 */
    }
</style>
</head>
<body>
    <div id="text_box1" class="move">
        <textarea 
            id="text_area1" 
            style="width:100%; height: 100%;" 
            onclick="change_editable(event)"> INSERT YOUR TEXT</textarea>
    </div>

    <script type="text/javascript">
        window.onload = function() {
            let temp = document.querySelectorAll(".back_card");
            var index = 0, length = temp.length;
            for (; index < length; index++) {
               temp[index].style.display = "none";
            }

            temp = document.querySelectorAll(".move");
            index = 0, length = temp.length;
            for (; index < length; index++) {
               Dragable(temp[index]);
            }
        };

        // 兼容性事件添加函数
        function addEvent(el, type, callback) {
            if (el.addEventListener) {
                el.addEventListener(type, callback);
            } else if (el.attachEvent) {
                el.attachEvent("on" + type, callback);
            }
        }

        // 切换可编辑/可调整大小状态
        function change_editable(e) {
            try {
                var id_element = e.srcElement.id.toString();
            } catch {
                var id_element = e.path[0].id.toString();
            }
            var element = document.getElementById(id_element);
            element.classList.toggle("editable_resize");
        }

        // 拖拽功能实现，包含冲突解决
        function Dragable(el) {
            var isMove = false, 
                x = 0, y = 0, 
                xel = 0, yel = 0; 

            addEvent(el, "mousedown", e => {
                const rect = e.target.getBoundingClientRect();
                const _x = e.clientX - rect.left;
                const _y = e.clientY - rect.top;

                // 检查鼠标是否在调整大小区域内（右下角18x18像素）
                if (rect.width - _x <= 18 && rect.height - _y <= 18) {
                    return; // 如果是，则不启动拖拽
                }

                isMove = true;
                el.className += " isMoving";

                x = window.event ? window.event.clientX : e.pageX;
                y = window.event ? window.event.clientY : e.pageY;

                xel = x - el.offsetLeft;
                yel = y - el.offsetTop;
            });

            addEvent(document, "mousemove", function(e) {
                if (isMove) {
                    e.preventDefault();

                    x = window.event ? window.event.clientX : e.pageX;
                    y = window.event ? window.event.clientY : e.pageY;

                    el.style.left = (x - xel) + 'px';
                    el.style.top = (y - yel) + 'px';
                }
            });

            addEvent(document, "mouseup", function() {
                el.className = String(el.className).replace(/(^|\s)isMoving(\s|$)/g, " ");
                isMove = false;
            });
        }
    </script>
</body>
</html>

登录后复制

注意事项与总结

调整大小区域的灵活性： 示例中将调整大小区域硬编码为右下角18x18像素。你可以根据实际需求调整这个阈值，或者实现更复杂的逻辑来识别多个调整手柄（例如，四个角和四条边）。
自定义调整大小： 本教程利用了浏览器原生的resize: both CSS属性。如果需要更精细的控制（例如，限制最小/最大尺寸，或在调整大小时显示尺寸提示），则需要实现自定义的调整大小逻辑，其原理与拖拽类似，也是通过监听mousedown、mousemove和mouseup事件来改变元素的width和height属性。
事件委托与性能： 对于大量可拖拽/可调整大小的元素，可以考虑使用事件委托来优化性能，将事件监听器绑定到父容器上，而不是每个元素。
e.path 的兼容性： e.path 是非标准的属性，在某些浏览器中可能不可用。e.srcElement 也主要用于旧版IE。更通用的方式是使用 e.target 或 e.currentTarget，然后向上遍历DOM树以找到目标元素。在 change_editable 函数中，e.target 通常足以获取被点击的 textarea 元素。
window.event 的替代： 在现代浏览器中，应优先使用事件对象 e 的 pageX/pageY 或 clientX/clientY 属性来获取鼠标坐标，而不是 window.event。