DIV自定义拖拽布局

### DIV自定义拖拽布局知识点解析 #### 一、知识点概览 - **CSS样式设计**：用于构建页面布局及视觉效果。 - **JavaScript交互逻辑**：实现元素的拖拽功能。 - **DOM操作**：获取与修改HTML文档对象模型中的元素属性。 #### 二、CSS样式设计详解 在CSS部分，主要通过`<style>`标签定义了多种类选择器，以实现特定的布局效果： 1. **全局样式设置**： - `body`: 设置页面边距为0，并规定文本居中显示，字体大小为12px。 - `body > div`: 设置页面内最外层的`div`标签水平居中显示。 2. **容器样式设置**： - `.content`: 定义了一个宽900px的容器。 - `.content.left`: 定义左侧栏，宽度占20%，带有红色边框。 - `.content.center`: 定义中心区域，宽度占57%，同样有红色边框。 - `.content.right`: 定义右侧栏，宽度同样占20%，带有红色边框。 3. **模块样式设置**： - `.mo`: 自适应高度，带有灰色边框。 - `.moh1`: 内容头部样式，带有浅蓝色背景，鼠标移上时变为移动图标。 - `.mo.nr`: 特殊样式，固定高度80px，边框颜色较浅。 #### 三、JavaScript交互逻辑解析 JavaScript部分实现了拖拽功能的核心逻辑，通过监听鼠标事件实现元素的拖动。 1. **变量初始化**： - `var dragobj = {}`：用于存储拖拽过程中需要跟踪的信息。 - `window.onerror = function() { return false }`：错误处理函数，防止页面出现错误导致交互中断。 - 通过`navigator.userAgent`判断浏览器类型，分别处理Firefox和IE浏览器兼容性问题。 2. **初始化函数`on_ini`**： - 调用`basic_ini`函数进行基础环境初始化。 - 判断浏览器类型，为Firefox添加额外的鼠标位置获取方法。 - 调用`basic_ini`初始化函数。 3. **基本初始化函数`basic_ini`**： - 定义全局函数`$`用于通过ID获取DOM元素。 - 定义全局函数`oDel`用于删除指定DOM元素。 4. **加载完成触发函数**： - 获取所有`<h1>`标签并绑定`onmousedown`事件，当用户按下鼠标左键时触发拖拽行为。 5. **拖拽过程**： - 计算被拖动元素的初始位置(`dragobj.xy`)以及鼠标相对位置(`dragobj.xx`)。 - 设置被拖动元素的样式（如宽度、高度、位置等），并将其定位模式改为`absolute`。 - 创建一个临时的`div`元素作为拖拽过程中的辅助对象，用于维持原始元素的尺寸。 #### 四、总结 本案例中，通过CSS和JavaScript的结合，实现了DIV自定义拖拽布局的功能。CSS负责定义页面的基本样式和布局，而JavaScript则负责实现元素的动态拖拽效果。这种布局方式在需要灵活调整页面结构的应用场景中非常实用，例如后台管理系统的界面设计。开发者可以根据实际需求进一步扩展和完善这些代码，比如增加更多的交互效果或优化用户体验。