在web开发中，我们经常需要创建可交互的ui元素，例如一个既能被用户拖动到任意位置，又能调整其尺寸的文本框（textarea）。然而，当同时实现拖拽和原生调整大小功能时，一个常见的挑战是它们之间的事件冲突。通常情况下，mousedown事件既会触发拖拽逻辑，也会在元素右下角区域触发原生的调整大小手柄。如果不对用户意图进行区分，拖拽事件会覆盖调整大小事件，导致用户无法正常调整元素大小。
首先，我们需要一个基本的HTML结构来承载我们的可拖拽和可调整大小的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">
/* 文本框样式 */
textarea {
background: rgba(0, 0, 0, 0.150);
resize: none; /* 初始禁用原生resize，通过JS动态启用 */
width: 100%;
height: 100%; /* 确保textarea填满父容器 */
border: 1px solid #ccc;
padding: 5px;
box-sizing: border-box; /* 边框和内边距不增加元素总尺寸 */
}
/* 启用调整大小的类 */
.editable_resize {
resize: both; /* 允许水平和垂直调整大小 */
overflow: auto; /* 调整大小时显示滚动条 */
}
/* 可拖拽容器样式 */
.move {
position: absolute; /* 绝对定位，允许自由拖动 */
z-index: 1000; /* 确保拖动时在其他元素之上 */
width: 200px;
height: 200px;
background-color: #fc0; /* 容器背景色 */
cursor: grab; /* 默认显示抓取手势 */
}
/* 拖动时的样式 */
.isMoving {
z-index: 1001 !important; /* 拖动时提升z-index */
cursor: grabbing; /* 拖动时显示抓取中手势 */
}
</style>
</head>
<body>
<div id="text_box1" class="move">
<textarea id="text_area1" onclick="change_editable(event)">在这里输入您的文本</textarea>
</div>
</body>
</html>在上述代码中：
接下来，我们编写JavaScript代码来实现元素的拖拽功能。
// 辅助函数：跨浏览器事件绑定
function addEvent(el, type, callback) {
if (el.addEventListener) {
el.addEventListener(type, callback);
} else if (el.attachEvent) {
el.attachEvent("on" + type, callback);
}
}
// 拖拽函数
function Dragable(el) {
var isMove = false, // 标记是否正在拖动
x = 0, y = 0, // 鼠标按下时的坐标
xel = 0, yel = 0; // 元素相对于视口的偏移
addEvent(el, "mousedown", function (e) {
// 在这里，我们将添加一个判断，以避免与resize冲突
// ... (稍后添加)
isMove = true;
el.classList.add("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.classList.remove("isMoving"); // 移除拖动样式
isMove = false;
});
}
// 页面加载完成后初始化拖拽功能
window.onload = function () {
// 假设有其他元素需要隐藏
let backCards = document.querySelectorAll(".back_card");
for (let i = 0; i < backCards.length; i++) {
backCards[i].style.display = "none";
}
// 为所有具有 .move 类的元素添加拖拽功能
let moveElements = document.querySelectorAll(".move");
for (let i = 0; i < moveElements.length; i++) {
Dragable(moveElements[i]);
}
};为了让 textarea 能够调整大小，我们通过一个 onclick 事件来动态添加或移除 editable_resize 类。
立即学习“前端免费学习笔记（深入）”；
// 切换textarea的调整大小能力
function change_editable(e){
// 兼容不同浏览器获取事件源的方式
let id_element;
try {
id_element = e.srcElement.id.toString();
} catch {
id_element = e.path[0].id.toString();
}
const element = document.getElementById(id_element);
element.classList.toggle("editable_resize"); // 切换类
}当前代码的问题在于，当鼠标点击 textarea 的右下角（原生调整大小手柄区域）时，Dragable 函数中的 mousedown 事件仍然会被触发，导致拖拽开始，从而阻止了原生的调整大小操作。
解决此问题的关键在于：在 Dragable 函数的 mousedown 事件处理程序中，判断鼠标点击的位置。如果点击位置在元素的右下角特定区域（即原生调整大小手柄的有效区域），则我们不应该启动拖拽，而是允许浏览器处理原生的调整大小事件。
我们可以在 mousedown 事件的开头添加一个条件判断：
// 修改后的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; // 鼠标相对于元素左边缘的X坐标
const _y = e.clientY - rect.top; // 鼠标相对于元素上边缘的Y坐标
// 定义一个“调整大小区域”的阈值，例如右侧和底部18像素
// 如果鼠标点击在这个区域内，则认为是尝试调整大小，不启动拖拽
const RESIZE_THRESHOLD = 18;
if (rect.width - _x <= RESIZE_THRESHOLD && rect.height - _y <= RESIZE_THRESHOLD) {
return; // 阻止拖拽操作，让浏览器处理原生resize
}
isMove = true;
el.classList.add("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.classList.remove("isMoving");
isMove = false;
});
}解释修改点：
将所有代码整合到一起，形成一个完整的可运行示例：
<!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 {
background: rgba(0, 0, 0, 0.150);
resize: none; /* 初始禁用原生resize，通过JS动态启用 */
width: 100%;
height: 100%; /* 确保textarea填满父容器 */
border: 1px solid #ccc;
padding: 5px;
box-sizing: border-box; /* 边框和内边距不增加元素总尺寸 */
}
/* 启用调整大小的类 */
.editable_resize {
resize: both; /* 允许水平和垂直调整大小 */
overflow: auto; /* 调整大小时显示滚动条 */
}
/* 可拖拽容器样式 */
.move {
position: absolute; /* 绝对定位，允许自由拖动 */
z-index: 1000; /* 确保拖动时在其他元素之上 */
width: 200px;
height: 200px;
background-color: #fc0; /* 容器背景色 */
cursor: grab; /* 默认显示抓取手势 */
}
/* 拖动时的样式 */
.isMoving {
z-index: 1001 !important; /* 拖动时提升z-index */
cursor: grabbing; /* 拖动时显示抓取中手势 */
}
</style>
</head>
<body>
<div id="text_box1" class="move">
<textarea id="text_area1" onclick="change_editable(event)">在这里输入您的文本</textarea>
</div>
<script type="text/javascript">
// 辅助函数：跨浏览器事件绑定
function addEvent(el, type, callback) {
if (el.addEventListener) {
el.addEventListener(type, callback);
} else if (el.attachEvent) {
el.attachEvent("on" + type, callback);
}
}
// 切换textarea的调整大小能力
function change_editable(e){
let id_element;
try {
id_element = e.srcElement.id.toString();
} catch {
id_element = e.path[0].id.toString();
}
const 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;
// 定义调整大小区域的阈值
const RESIZE_THRESHOLD = 18; // 像素
if (rect.width - _x <= RESIZE_THRESHOLD && rect.height - _y <= RESIZE_THRESHOLD) {
return; // 如果点击在右下角resize区域，则不启动拖拽
}
isMove = true;
el.classList.add("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.classList.remove("isMoving");
isMove = false;
});
}
// 页面加载完成后初始化
window.onload = function () {
// 示例中未提供的 .back_card 元素处理
let backCards = document.querySelectorAll(".back_card");
for (let i = 0; i < backCards.length; i++) {
backCards[i].style.display = "none";
}
// 为所有 .move 元素添加拖拽功能
let moveElements = document.querySelectorAll(".move");
for (let i = 0; i < moveElements.length; i++) {
Dragable(moveElements[i]);
}
};
</script>
</body>
</html>通过在 mousedown 事件中智能地判断鼠标位置，我们成功地解决了拖拽和原生调整大小功能之间的冲突，使得用户可以流畅地拖动和调整 textarea 元素的大小。这种方法提供了一种简单而有效的方式来增强Web应用的交互性。
以上就是优化HTML元素拖拽与原生调整大小的冲突的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
314
收藏
