深入探索jQuery EasyUI 1.4.3的奇葩案例与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_34535286/article/details/148305280

简介：本案例集合通过展示jQuery EasyUI在特殊场景下的应用，帮助开发者理解和掌握EasyUI组件的使用。介绍了EasyUI的核心概念、1.4.3版本的新特性，以及四个奇葩案例：动态加载的多级菜单、自定义验证的表单、无限滚动的datagrid和弹出层中的拖放功能。每个案例都有详细的代码解析，提供了学习资源、调试技巧和实战演练，旨在提升前端开发技能。 jquery EasyUI 1.4.3奇葩案例代码

1. jQuery EasyUI核心概念

1.1 简介

jQuery EasyUI是一款基于jQuery框架开发的前端UI库。其核心是将常用的界面组件以插件形式组织起来，提供易于使用的API，使得开发者能够快速创建交云和响应式的用户界面。它旨在帮助开发者避免复杂的CSS和JavaScript编程，通过简单配置即可获得丰富的界面组件。

1.2 设计哲学

EasyUI的设计哲学基于轻量级、可扩展和模块化原则。这使得它非常容易集成到已有的项目中，而不会引起项目架构的大量变动。该框架不仅适用于小型项目，而且通过组件化的管理，也能很好地服务于复杂的应用场景。

1.3 核心特点

集成度高 ：提供一套完整的界面组件，如按钮、面板、表格等，无需额外插件即可实现复杂的用户交互。
易用性强 ：对于开发者而言，EasyUI提供了直观的API接口，减少了学习成本，加快开发进度。
响应式设计 ：大部分组件支持响应式布局，适应不同尺寸的显示设备，确保用户体验的一致性。

EasyUI通过上述特点，极大地简化了前端开发流程，特别是在动态数据交互和界面展示方面，让开发者能够更加聚焦于业务逻辑的实现。

2. jQuery基础要求

2.1 jQuery EasyUI的基本使用

2.1.1 引入jQuery EasyUI的步骤

使用jQuery EasyUI框架，首先需要在项目中引入jQuery库以及jQuery EasyUI的相关文件。按照以下步骤操作：

从官方网站下载jQuery EasyUI文件包或通过CDN链接获取。
在HTML页面的 <head> 标签中添加EasyUI的CSS样式文件链接。
在页面底部（ </body> 标签之前）添加jQuery库文件链接。
添加jQuery EasyUI的JavaScript文件链接。

例如，通过CDN引入的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入EasyUI的CSS -->
    <link rel="stylesheet" type="text/css" href="path/to/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="path/to/easyui/themes/icon.css">
    <!-- 页面布局所需的一些额外CSS -->
    <link rel="stylesheet" type="text/css" href="path/to/easyui/themes过剩/structure.css">
</head>
<body>
    <!-- 页面内容 -->

    <!-- 引入jQuery库 -->
    <script type="text/javascript" src="path/to/jquery.min.js"></script>
    <!-- 引入jQuery EasyUI的JavaScript -->
    <script type="text/javascript" src="path/to/jquery.easyui.min.js"></script>
</body>
</html>

2.1.2 页面加载与初始化

页面加载完成后，jQuery EasyUI可能需要进行一些初始化操作，以确保组件能正确渲染在页面上。

确保DOM元素在引入EasyUI之后被加载。
通过调用 $(function() { ... }); 进行文档就绪操作。
根据需要，初始化特定的jQuery EasyUI组件。

例如：

$(function() {
    // 初始化对话框组件
    $('#dialog').dialog({
        title: '示例对话框',
        width: 400,
        height: 300,
        closed: false
    });

    // 其他组件的初始化代码...
});

2.2 jQuery EasyUI的选择器和事件处理

2.2.1 基于类和ID的选择器

jQuery EasyUI使用jQuery的选择器，它们提供了强大而方便的方式来选择页面上的元素。

类选择器（例如： .myClass ）
ID选择器（例如： #myID ）

使用示例：

// 获取具有类名为 'myClass' 的所有元素
var elements = $('.myClass');

// 获取ID为 'myID' 的元素
var element = $('#myID');

2.2.2 事件绑定与事件对象

jQuery EasyUI支持标准的事件绑定方式。使用 .on() 方法绑定事件，并处理事件对象，可以获取事件触发的详细信息。

示例代码：

// 绑定点击事件
$('#myButton').on('click', function(e) {
    // e 是事件对象，包含了如e.pageX, e.pageY等属性
    console.log('点击位置：', e.pageX, e.pageY);
});

2.2.3 事件委托与自定义事件

事件委托允许在父元素上绑定事件处理器，由子元素的事件触发。

示例代码：

// 在父容器上委托事件给子元素 '.myClass'
$('#parentElement').on('click', '.myClass', function() {
    console.log('子元素被点击');
});

自定义事件允许开发者在jQuery EasyUI组件上触发或监听自定义事件，这在组件交互中非常有用。

示例代码：

// 触发自定义事件
$('#myComponent').trigger('myCustomEvent');

// 监听自定义事件
$('#myComponent').on('myCustomEvent', function() {
    alert('自定义事件被触发');
});

2.3 jQuery EasyUI的DOM操作

2.3.1 元素查找与过滤

jQuery提供了广泛的方法来查找DOM元素以及对这些元素进行过滤，例如 find() , filter() , not() 等。

查找元素示例：

// 查找具有 'myClass' 类的子元素
var childElements = $('#parentElement').find('.myClass');

过滤元素示例：

// 获取所有div元素，但排除具有 'excludedClass' 类的
var filteredDivs = $('div').not('.excludedClass');

2.3.2 DOM元素的创建、插入和删除

jQuery EasyUI允许开发者使用方法如 append() , prepend() , remove() , html() 等，来操纵DOM元素。

创建元素示例：

// 创建一个新div，并插入到页面中
var newDiv = $('<div/>').html('新创建的元素');
$('body').append(newDiv);

插入元素示例：

// 将newDiv插入到#someElement内部的开始位置
$('#someElement').prepend(newDiv);

删除元素示例：

// 删除类名为 'toDelete' 的元素
$('.toDelete').remove();

以上章节内容体现了jQuery EasyUI基础要求中，如何快速上手使用jQuery EasyUI，掌握其基本的引入方式、页面初始化步骤，选择器及事件处理机制，以及对DOM的操作能力。这些基础知识对后续的学习和应用起到至关重要的作用，它们是构建动态网页和创建丰富交互的基础。接下来的章节，将进一步深入探讨jQuery EasyUI的组件化特性和新版本特性，为学习者提供更全面的技能提升路径。

3. 组件化特性

组件化是前端开发中的一种常用方法，它将复杂的界面分解为简单的、可复用的组件，从而提高了代码的可维护性和扩展性。在本章节中，我们将深入了解组件化的核心概念，并探索如何将这一理念应用到实际开发中。

3.1 组件化设计理念

3.1.1 什么是组件化

组件化是将界面划分为独立、可复用的组件的过程。每个组件都拥有自己的逻辑和结构，它们可以组合起来创建完整的用户界面。在jQuery EasyUI中，组件化不仅体现在UI元素上，也贯穿于开发流程中，确保了高度的模块化和可维护性。

3.1.2 组件化的好处

组件化带来了诸多好处，主要包括： - 复用性 ：组件可以跨项目复用，减少重复代码。 - 模块化 ：代码被分解为独立的模块，易于管理。 - 可维护性 ：由于组件的独立性，问题定位和维护变得更加容易。 - 灵活性 ：组件可独立于项目存在，便于适应不同的设计需求。

3.2 常见的组件及其功能

3.2.1 按钮与链接

按钮和链接是界面中最基本的元素，jQuery EasyUI提供了 easyui-button 和 easyui-linkbutton 组件来实现这些功能。这些组件支持不同的主题和状态，可以轻松自定义样式和行为。

示例代码

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
<button id="myButton" class="easyui-button">删除</button>

// 绑定点击事件
$('#myButton').click(function() {
    alert('按钮被点击了！');
});

3.2.2 表格与树形控件

表格( easyui-datagrid )和树形控件( easyui-tree )是用于展示和管理数据的强大组件。它们支持动态数据加载、分页、排序、列自定义等丰富的功能。

示例代码

<table id="tt"></table>
<script>
$(function(){
    $('#tt').tree({
        url: '/path/to/tree/data', // 数据源URL
        method: 'get',
        data: {param: value},
        lines: true,
        loader: function(node, callback){
            // 使用node.text获取当前节点的文本值
            callback([{
                id: 1,
                text: 'Branch 1',
                children: [
                    {id: 11, text: 'Leaf 1-1'},
                    {id: 12, text: 'Leaf 1-2'},
                ]
            }, {
                id: 2,
                text: 'Branch 2',
                children: [
                    {id: 21, text: 'Leaf 2-1'},
                    {id: 22, text: 'Leaf 2-2'},
                ]
            }]);
        }
    });
});
</script>

3.2.3 表单控件

表单控件( easyui-form )为收集和验证用户输入提供了丰富的支持。可以利用 easyui-validatebox 进行表单验证，增强用户交互体验。

示例代码

<form id="fm" method="post" action="target url">
    <div>
        <label for="username">用户名</label>
        <input id="username" name="username" type="text" class="easyui-validatebox" required message="请输入用户名" trigger="blur">
    </div>
    <div>
        <label for="password">密码</label>
        <input id="password" name="password" type="password" class="easyui-validatebox" required message="请输入密码" trigger="blur">
    </div>
    <div>
        <button type="submit" class="easyui-button">登录</button>
    </div>
</form>

3.3 组件的整合与扩展

3.3.1 组件的布局管理

组件的布局管理是通过布局组件如 easyui-layout 来实现的，它允许开发者创建多面板布局，并提供了丰富的配置选项，如边框、方位、大小等。

示例代码

<div id="layout" style="width:600px; height:400px;">
    <!-- 定义布局的顶部、底部、左侧、右侧区域 -->
    <div data-options="region:'north',title:'Header'" style="height:100px;"></div>
    <div data-options="region:'west',title:'Navigation',split:true" style="width:150px;">
        <!-- 嵌套布局用于多层导航 -->
        <div data-options="region:'center',title:'SubNavigation'" style="height:300px;"></div>
    </div>
    <div data-options="region:'center',title:'Content'" style="padding:5px;"></div>
</div>

3.3.2 自定义主题和皮肤

通过自定义主题和皮肤，开发者可以创建具有品牌特性的用户界面。jQuery EasyUI提供了简单的工具来定制样式，这包括改变颜色、字体、按钮样式等。

示例代码

/* 自定义主题样式 */
.custom-theme .easyui-button {
    background-color: #FFD700;
    color: #FFFFFF;
}

开发者可以将上述CSS类添加到 easyui.css 文件中，从而实现自定义主题的加载和应用。

// 加载自定义主题
$('link[rel="stylesheet"][type="text/css"]').remove(); // 移除现有主题链接
$('head').append('<link rel="stylesheet" type="text/css" href="themes/custom-theme/easyui.css">');

以上，我们不仅了解了组件化的基本概念和好处，还探索了常见组件的使用示例和如何通过扩展实现自定义功能。接下来，我们将深入探讨EasyUI的最新特性，包括新版本的改进和升级、以及如何优化代码以提高性能。

4. EasyUI 1.4.3版本新特性

4.1 新版本的改进与升级

4.1.1 新增组件介绍

EasyUI 1.4.3版本为开发者带来了若干全新的组件，这些组件旨在进一步提升Web界面的用户体验和交互能力。新增组件包括：

Message Box 弹框组件 ：用于显示通知、警告、错误等信息，并提供用户交互的入口。
Tab Panel 标签面板组件 ：支持在页面上以标签形式管理多个面板，用户可以方便地切换查看不同内容。
DataGrid 表格组件的增强 ：比如新增了对固定列、单选/多选等功能的支持，使得表格数据展示更加灵活。

// 示例：使用 Message Box 弹框组件
$.messager.show({
    title: '消息',
    msg: '这是一个消息提示框',
    timeout: 2000, // 2秒后自动关闭
    icon: 'info' // 显示信息图标
});

在上述代码中，通过调用 $.messager.show 方法，开发者能够非常简单地在页面上展示一个带有标题和信息的弹框。这对于反馈操作结果、通知用户信息等功能非常有用。

4.1.2 功能改进细节

除了新增组件，EasyUI 1.4.3还对现有组件进行了一系列的功能改进，如：

TreeGrid组件性能优化 ：在处理大数据集时，性能有明显提升。
DateBox日期选择器样式调整 ：改进了外观并支持更多的日期格式。
Toolbar工具栏组件支持分组 ：用户现在可以更灵活地在工具栏中组织按钮和其他组件。

// 示例：TreeGrid组件性能优化后使用
$('#treegrid').treegrid({
    url: 'data.php',
    method: 'get',
    ...
}).treegrid('load');

上述代码展示了如何加载TreeGrid组件，并利用了1.4.3版本的性能优化优势。随着数据量的增加，加载速度的提升将给用户带来更好的使用体验。

4.2 兼容性与性能优化

4.2.1 浏览器兼容性报告

在最新的1.4.3版本中，EasyUI团队对各主流浏览器进行了严格的测试，确保在Chrome、Firefox、Safari、Edge和Internet Explorer等浏览器上都能提供一致的用户体验。下表是部分浏览器的兼容性报告：

| 浏览器 | 版本 | 是否兼容 | |------------|------|-------| | Chrome | 80 | 是 | | Firefox | 74 | 是 | | Safari | 13 | 是 | | Edge | 80 | 是 | | Internet Explorer | 11 | 部分支持 |

通过提供详细的兼容性报告，开发者可以更加确信EasyUI在不同浏览器环境中的表现，从而在项目开发中放心使用。

4.2.2 代码优化与执行效率

性能优化是EasyUI 1.4.3版本的重点工作之一。通过减少DOM操作次数、提高CSS选择器效率等手段，EasyUI在执行速度上有了显著提升。此外，对JavaScript代码进行了压缩和优化，减小了文件体积，提高了脚本加载速度。

// 优化前代码片段
$('#myElement').find('.child').each(function() {
    // 执行一些操作
});

// 优化后代码片段
$('.child', $('#myElement')).each(function() {
    // 执行相同的操作
});

在上述示例中，优化后的代码片段通过减少中间变量的使用，直接在选择器中指定了父元素，从而减少了对DOM树的搜索次数，提升执行效率。

此外，EasyUI还加入了对ES6+的代码特性支持，使得代码在现代浏览器中的加载和执行更加高效。

通过这些优化措施，EasyUI 1.4.3在保证功能强大的同时也兼顾了性能，为构建高性能Web应用提供了可靠的支持。

在本章节中，我们深入了解了EasyUI 1.4.3版本所引入的新特性、改进以及性能优化方面的内容。通过新增的组件、对现有组件功能的增强、以及兼容性和性能方面的改进，EasyUI进一步提升了其在Web开发中的可用性和吸引力。下一章节我们将探讨如何实现动态加载多级菜单，以及如何利用这些新特性来完成更复杂的界面设计。

5. 动态加载多级菜单实现

5.1 多级菜单的设计思路

5.1.1 菜单结构与数据模型

多级菜单通常用于构建具有层级关系的导航结构，如网站导航栏或应用程序的菜单系统。它们允许用户在不同的菜单项间导航，通过层级来组织内容。为了实现多级菜单，通常需要在前端创建一个树形的数据结构来表示这些层级关系。

这个结构通常由一个数组构成，数组中的每个对象代表一个菜单项，每个菜单项包含若干属性来描述它的特征，如文本内容（ text ）、链接（ href ）、子菜单（ children ）等。以下是一个简单的示例：

var menuData = [
  {
    text: '首页',
    href: '#',
    iconCls: 'icon-home',
    children: [
      { text: '子菜单1', href: '#' },
      { text: '子菜单2', href: '#' }
    ]
  },
  {
    text: '关于我们',
    href: '#',
    children: [
      { text: '企业历史', href: '#' },
      { text: '企业文化', href: '#' },
      { text: '团队介绍', href: '#' }
    ]
  }
  // 更多菜单项...
];

在这个数据模型中， children 属性是一个数组，它包含子菜单项，允许我们构建任意深度的多级菜单结构。

5.1.2 菜单的动态加载机制

动态加载机制可以实现按需加载菜单数据，这样可以减少初次加载页面所需的资源和时间，同时，还可以提高系统性能。动态加载通常通过AJAX调用来获取数据，然后使用JavaScript来更新菜单视图。

实现动态加载机制的步骤可以分为： 1. 声明菜单的HTML结构，但不包含实际的菜单项数据。 2. 通过JavaScript事件触发AJAX请求，获取菜单数据。 3. 使用回调函数处理返回的数据，并动态地添加到菜单结构中。

5.2 实现动态多级菜单的代码示例

5.2.1 菜单数据的定义与加载

为了实现动态加载，我们可以使用jQuery EasyUI的 panel 组件来构建菜单容器，并使用 tree 组件来构建多级菜单。以下示例展示了如何定义菜单数据并加载到页面上：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div id="menu" style="width:200px;height:400px;"></div>

<script>
    // 定义获取菜单数据的函数
    function loadData() {
        return [
            {
                text: '首页',
                iconCls: 'icon-home',
                children: [
                    { text: '子菜单1', iconCls: 'icon-edit' },
                    { text: '子菜单2', iconCls: 'icon-edit' }
                ]
            },
            {
                text: '关于我们',
                iconCls: 'icon-edit',
                children: [
                    { text: '企业历史', iconCls: 'icon-edit' },
                    { text: '企业文化', iconCls: 'icon-edit' },
                    { text: '团队介绍', iconCls: 'icon-edit' }
                ]
            }
        ];
    }

    // 加载菜单
    $('#menu').tree({
        data: loadData(), // 初始加载菜单数据
        lines: true, // 显示连线
        onBeforeLoad: function(node, callback) {
            // 模拟异步获取数据
            setTimeout(function() {
                var newData = loadData();
                callback(newData); // 返回新数据
            }, 2000);
        }
    });
</script>

</body>
</html>

在上述代码中， loadData 函数返回了菜单的数据，这只是一个静态的示例。在实际应用中，它将是一个发起AJAX请求的函数，根据实际情况动态地获取数据。 onBeforeLoad 事件是树组件加载子节点前触发的事件，在这里模拟了一个异步过程，每隔两秒钟返回新的菜单数据。

5.2.2 菜单的交互与状态管理

为了使用户能够与动态加载的多级菜单进行交互，需要处理相关的事件和状态。例如，当用户展开一个菜单项时，需要触发 onBeforeLoad 事件来加载子菜单项。同时，我们可能还需要保存菜单项的展开状态，以提升用户体验。

以下代码展示了如何处理菜单项展开事件，并保存展开状态：

var expandedNodes = []; // 存储已经展开的节点

$('#menu').tree({
    // ...之前的配置
    onExpand: function(node) {
        // 保存展开节点的ID到数组中
        expandedNodes.push(node.id);
    },
    onCollapse: function(node) {
        // 从数组中移除已经收起节点的ID
        var index = expandedNodes.indexOf(node.id);
        if (index > -1) {
            expandedNodes.splice(index, 1);
        }
    },
    onBeforeLoad: function(node, callback) {
        // 在加载数据前检查节点是否已经被展开过
        if (expandedNodes.indexOf(node.id) > -1) {
            setTimeout(function() {
                var newData = loadData();
                callback(newData);
            }, 2000);
        } else {
            callback([]); // 如果节点未展开，不加载子项
        }
    }
});

在此代码段中，通过 onExpand 和 onCollapse 事件可以跟踪哪些菜单项是展开的，并存储它们的ID。当 onBeforeLoad 事件触发时，它会检查当前节点是否已经在 expandedNodes 数组中。如果是，则加载子数据；如果不是，则不加载子数据，这样做可以模拟“懒加载”的效果。

通过这些事件的处理和状态管理，我们可以实现一个多级菜单的动态加载功能，并且提供了一个良好的用户体验。

6. 实战演练和技能提升

6.1 自定义表单验证实现

6.1.1 表单验证的基本原理

在Web开发中，表单验证是确保用户输入数据有效性和完整性的关键步骤。它不仅可以防止不合法的数据提交到服务器，还可以提升用户体验，避免在填写表单时发生错误。在jQuery EasyUI框架中，表单验证通常结合 <form> 标签的 validatebox 控件使用。

6.1.2 EasyUI验证规则的扩展

EasyUI提供了一套灵活的验证规则，但有时候开发者可能需要实现一些自定义的验证逻辑。实现自定义验证规则通常涉及编写JavaScript函数，并将其注册到EasyUI的验证机制中。例如，假设我们要添加一个自定义规则来验证电子邮件地址是否已存在于数据库中，我们可以如下进行操作：

// 验证规则函数
function emailInUse(value, param) {
    // 这里应当是发送请求到后端服务的代码，此处为了演示使用伪代码
    if (isEmailInUse(value)) {
        return "该电子邮件地址已被注册";
    } else {
        return true;
    }
}

// 注册验证规则
$.extend($.fn.validatebox.defaults.rules, {
    emailInUse: {
        validator: emailInUse, // 指定验证函数
        message: '' // 可以指定错误信息
    }
});

// 使用新规则
$('#myForm').validatebox({
    rules: {
        email: {
            required: true,
            emailInUse: true // 这里使用了我们自定义的规则
        }
    }
});

在上面的代码示例中，我们首先定义了一个名为 emailInUse 的函数，该函数负责检查输入的电子邮件地址是否已存在于后端数据库中。接着，我们将此函数注册为 emailInUse 验证规则，并通过 validatebox 控件在表单中使用它。

6.2 无限滚动的datagrid实现

6.2.1 datagrid的配置与使用

无限滚动（也称为懒加载或无限分页）是一种流行的加载数据的方式，它通过只加载用户当前需要查看的部分数据，来提高页面的性能和用户体验。在jQuery EasyUI中，可以通过配置 datagrid 控件来实现无限滚动。

6.2.2 无限滚动机制的实现

实现无限滚动主要依赖于 datagrid 的 onLoadSuccess 事件，此事件在数据加载成功后触发，可以在这个事件中编写逻辑以判断是否需要加载更多数据。

$('#myDatagrid').datagrid({
    url: 'data.php', // 数据加载地址
    pagination: true, // 启用分页功能
    pageSize: 10, // 每页显示数据量
    pageList: [10, 20, 30, 50, 100], // 分页条上显示的分页数选项
    loadMsg: '正在加载数据...', // 数据加载时的提示信息
    onBeforeLoad: function(pageNum) {
        // 在加载数据前的逻辑
    },
    onLoadSuccess: function(result, pageNum, pageSize) {
        if (!result.length) {
            // 如果返回数据为空，说明已经加载到数据末尾，无需再加载
            return;
        }
        // 将新的数据项添加到数据网格中
        // ...
        // 判断是否还有更多数据，如果有，继续加载
        if (result.length < pageSize) {
            // 如果返回的数据量小于设定的页面大小，说明已无更多数据
            // 此时应该关闭加载更多数据的按钮或者提示用户
        }
    }
});

在上面的代码片段中，我们首先定义了一个 datagrid ，其中包括了分页参数和数据加载时的逻辑处理。在 onLoadSuccess 事件中，我们通过判断返回数据的数量是否小于一页应显示的数量来决定是否继续加载数据。

6.3 弹出层中的拖放功能实现

6.3.1 拖放功能的基本原理

拖放功能允许用户通过拖拽的方式对页面元素进行操作，这种交互方式直观、方便，为用户带来了很大的便利。在jQuery EasyUI中，拖放功能可以借助 draggable 和 droppable 控件来实现。

6.3.2 弹出层中拖放功能的代码实现

拖放功能通常涉及两个主要部分：拖动源（draggable）和放置目标（droppable）。以下是一个简单的弹出层中实现拖放功能的代码示例：

// 使弹出层可拖动
$('#popupDraggable').draggable({
    handle: '#popupHeader', // 指定拖动的把手区域
});

// 使div可以接收拖放
$('#divDroppable').droppable({
    drop: function(event, ui) {
        // 这里可以处理拖放完成后的逻辑
        var droppedElement = ui.draggable; // 获取被拖放的元素
        // ...
    }
});

在上述代码中，我们首先使得一个弹出层（ #popupDraggable ）可以被拖动，且可以通过选择器 #popupHeader 指定拖动的把手区域。接下来，我们定义了一个可放置目标（ #divDroppable ），当拖拽的元素被放置到该目标上时，会触发 drop 事件。