理解冲突
在web开发中，为用户界面元素提供拖拽（drag）和调整大小（resize）功能是常见的需求。然而，当这两个功能同时应用于同一个元素时，往往会产生事件冲突。具体来说，当用户尝试通过点击并拖动元素的边缘来调整其大小时，mousedown事件通常会同时触发元素的拖拽逻辑，导致调整大小操作被拖拽操作覆盖，使用户无法顺利完成调整大小。这种冲突的根本原因在于，拖拽和调整大小都依赖于mousedown、mousemove和mouseup事件序列，且初始的mousedown事件无法直接区分用户的最终意图。
核心思路
解决这一冲突的关键在于在mousedown事件发生时，精确判断用户的操作意图。我们的策略是：在元素上按下鼠标时，检查鼠标指针的当前位置。如果鼠标指针位于元素右下角的一个预定义区域（通常是浏览器默认的调整大小手柄区域），则我们假定用户意图是调整大小，并阻止拖拽事件的启动。反之，如果鼠标指针位于元素的其他区域，则启动拖拽功能。这样，通过对鼠标位置的判断，我们可以在事件开始阶段就区分两种操作，避免它们之间的干扰。
实现细节
我们将通过一个具体的示例来演示如何实现一个既可拖拽又可调整大小的textarea容器。
1. HTML 结构
首先，我们需要一个包含textarea的容器div。这个div将是我们的可拖拽元素，而textarea本身将利用CSS的resize属性实现大小调整。
可拖拽与可调整大小元素
2. CSS 样式
为了使元素能够拖拽和调整大小，我们需要定义一些基本的CSS样式。
立即学习“前端免费学习笔记（深入）”；
样式说明：
- .move 类定义了可拖拽元素的初始位置、尺寸和背景。position: absolute是实现拖拽的基础。
- textarea 默认禁用resize，其大小由父容器控制。
- .resizable 类在被添加到textarea时，将启用其原生的resize: both功能。
- .isMoving 类在元素被拖拽时应用，提供视觉反馈并确保其在最上层。
3. JavaScript 逻辑
JavaScript是实现拖拽与调整大小冲突解决方案的核心。
JavaScript 逻辑说明：
- window.onload: 页面加载完成后，遍历所有具有 .move 类的元素，并为它们调用 makeDraggable 函数。
