异常教程

jQuery EasyUI 基础插件 – Draggable 可拖拽（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代网页开发中，用户交互体验的优化至关重要。jQuery EasyUI 是一个功能强大的前端框架，其核心目标是通过丰富的插件简化复杂功能的实现。其中，jQuery EasyUI 基础插件 – Draggable 可拖拽，正是开发者实现动态页面交互的利器。无论是桌面端还是移动端，通过 Draggable 插件，开发者可以轻松让页面元素获得拖拽能力，例如调整窗口位置、自定义布局或实现游戏化交互。

本文将从零开始，逐步讲解 Draggable 插件的核心功能、配置参数、事件监听以及实际应用场景。无论你是编程新手还是有一定经验的开发者，都能通过本文快速掌握这一工具的使用逻辑与技巧。

安装与配置：构建拖拽功能的第一步

在使用 Draggable 插件前，需先确保 jQuery 和 jQuery EasyUI 的依赖环境已正确配置。

1. 引入核心库

在 HTML 文件的 <head> 或 <body> 中添加以下脚本和样式：

<!-- 引入 jQuery -->  
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  

<!-- 引入 EasyUI 核心库 -->  
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">  
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">  
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

2. 初始化 Draggable

通过调用 $.fn.draggable 方法即可快速启用拖拽功能：

$(document).ready(function() {  
  $("#myElement").draggable();  
});

对应的 HTML 元素需设置 id="myElement"，例如：

<div id="myElement" style="width: 200px; height: 100px; background-color: lightblue;">  
  我可以被拖拽！  
</div>

基础使用：让元素“活起来”

Draggable 插件的核心逻辑是通过监听鼠标事件（如 mousedown、mousemove、mouseup）来动态更新元素的位置。

1. 最简示例

<div id="draggableBox" style="width: 150px; height: 150px; background-color: #4CAF50; border-radius: 10px;">  
  点击并拖动我！  
</div>  

<script>  
$("#draggableBox").draggable();  
</script>

此示例中，元素默认可拖拽至页面任意位置，但开发者可通过参数进一步控制行为。

2. 关键参数解析

参数名描述默认值
axis限制拖拽方向（x 或 y）null
cursor设置拖拽时的光标样式（如 move）auto
disabled是否禁用拖拽功能false
handle指定触发拖拽的子元素（如 .handle-class）null
proxy生成一个“代理元素”替代原元素拖动（如 #proxyElement）null
scroll是否允许拖拽时滚动父容器（如浏览器窗口）true
snap开启吸附功能（需配合 snap、snapTolerance 参数）false

示例：限制拖拽方向与光标样式

$("#draggableBox").draggable({  
  axis: "x", // 只允许水平拖拽  
  cursor: "move" // 设置光标为“抓手”样式  
});

进阶功能：用事件与参数实现复杂交互

Draggable 插件的灵活性不仅体现在参数配置上，还在于其提供的事件系统。开发者可通过监听事件实现动态逻辑。

1. 拖拽事件详解

事件名触发时机参数示例
dragstart开始拖拽时触发function(e, target)
drag拖拽过程中持续触发function(e, target)
dragstop结束拖拽时触发function(e, target)

示例：记录拖拽结束时的位置

$("#draggableBox").draggable({  
  dragstop: function(e, target) {  
    const position = $(target).position();  
    console.log("最终位置：X=" + position.left + ", Y=" + position.top);  
  }  
});

2. 动态控制拖拽范围

通过 containment 参数可将元素限制在指定区域内：

$("#draggableBox").draggable({  
  containment: "parent" // 限制在父容器内拖拽  
});

或通过坐标指定范围：

$("#draggableBox").draggable({  
  containment: [0, 0, 400, 300] // 左、上、右、下边界  
});

实战案例：可拖拽的对话框

以下案例展示如何结合 EasyUI 的 dialog 插件，实现一个可拖拽的自定义对话框：

<!-- HTML 结构 -->  
<div id="customDialog" style="display: none; padding: 20px;">  
  <h3>我的可拖拽对话框</h3>  
  <p>内容区域...</p>  
</div>  

<script>  
$(function() {  
  // 初始化对话框  
  $("#customDialog").dialog({  
    title: "拖拽测试",  
    modal: true,  
    closed: false,  
    buttons: [  
      {  
        text: "关闭",  
        handler: function() {  
          $(this).dialog("close");  
        }  
      }  
    ]  
  });  

  // 启用对话框的拖拽功能  
  $("#customDialog").draggable({  
    handle: ".panel-title" // 仅标题栏可拖拽  
  });  
});  
</script>

此案例中：

  1. 通过 dialog 插件创建基础对话框；
  2. 使用 draggable 的 handle 参数，限定仅标题栏可触发拖拽；
  3. 结合 modal 属性实现模态效果，提升用户体验。

常见问题与解决方案

1. 元素拖拽后位置未保存

问题描述：页面刷新后，元素恢复初始位置。
解决方法：通过 localStorage 或后端 API 保存拖拽后的坐标：

$("#draggableBox").draggable({  
  dragstop: function(e, target) {  
    const pos = $(target).position();  
    localStorage.setItem("dragX", pos.left);  
    localStorage.setItem("dragY", pos.top);  
  }  
});  

// 页面加载时恢复位置  
$(document).ready(function() {  
  const x = localStorage.getItem("dragX") || 0;  
  const y = localStorage.getItem("dragY") || 0;  
  $("#draggableBox").css({ left: x, top: y });  
});

2. 拖拽元素与其他组件重叠

解决方案：通过 z-index 属性调整层级关系，例如：

#draggableBox {  
  z-index: 1000; /* 确保拖拽元素始终在顶层 */  
}

结论

通过本文的讲解，读者已掌握 jQuery EasyUI 基础插件 – Draggable 可拖拽 的核心用法。从基础配置到高级事件监听，再到实际案例的实现，开发者可以灵活运用这一工具优化用户交互体验。

无论是构建可自定义布局的仪表盘、实现动态组件库，还是开发小游戏界面，Draggable 插件都能提供高效的支持。建议读者通过官方文档进一步探索其他参数与插件组合的可能性，逐步提升前端开发的技能树。

记住，技术工具的价值在于“让复杂的事情简单化”。Draggable 插件正是这一理念的完美体现——它将原本需要数百行代码实现的拖拽逻辑，浓缩为几行简洁的配置，帮助开发者专注于业务逻辑的创新。

最新发布

查看更多文章