轻松解锁 EasyUI Window 组件的实时拖动

EasyUI Window 组件默认采用延迟拖动机制，即在用户按下鼠标并移动一段时间后才开始拖动。虽然这在某些情况下是理想的，但对于需要立即响应的用户交互的应用程序来说，这可能是令人沮丧的。

本指南将指导您如何轻松修改 EasyUI 源码，将 Window 组件的拖动行为从延迟拖动更改为实时拖动。

第 1 步：下载 EasyUI 源码

从官方网站下载 EasyUI 源码包，或从您的包管理器中安装。对于本指南，我们使用的是 jQuery EasyUI 1.4.2 版本。

第 2 步：修改源文件

导航到 EasyUI 源代码中的 jquery.easyui.min.js 文件。找到与 window 组件拖动功能相关的以下代码块：

$.fn.window.methods.draggable = function(jq, opts){
    return jq.each(function(){
        var win = $(this);
        if (opts){
            if (opts.disabled){
                $(this).data('draggable').handle.off('mousemove').off('mousedown');
            } else {
                $(this).data('draggable').handle.on('mousemove', $.fn.window.methods.mousemove).on('mousedown', $.fn.window.methods.mousedown);
            }
        }
        $(this).draggable(opts);
        $(this).data('draggable').handle = $(opts.handle||win);
    });
};

第 3 步：移除延迟拖动

从代码块中删除以下几行，这些行负责延迟拖动行为：

if (opts.disabled){
    $(this).data('draggable').handle.off('mousemove').off('mousedown');
} else {
    $(this).data('draggable').handle.on('mousemove', $.fn.window.methods.mousemove).on('mousedown', $.fn.window.methods.mousedown);
}

修改后的代码块应如下所示：

$.fn.window.methods.draggable = function(jq, opts){
    return jq.each(function(){
        $(this).draggable(opts);
        $(this).data('draggable').handle = $(opts.handle||this);
    });
};

第 4 步：保存更改

保存对 jquery.easyui.min.js 文件所做的更改。

第 5 步：重新编译 EasyUI

使用您的包管理器或命令行工具重新编译 EasyUI，以生成更新的 jquery.easyui.min.js 文件。

第 6 步：享受实时拖动

现在，当您拖动 EasyUI Window 组件时，它将立即响应，无需延迟。

示例用法

使用以下代码创建带有实时拖动的 EasyUI Window 组件：

$('#window').window({
    title: 'My Window',
    width: 400,
    height: 300,
    draggable: true
});

通过这些简单的修改，您可以充分利用 EasyUI Window 组件的实时拖动功能，从而为您的用户提供更直观、更响应的应用程序界面。