如何在jQuery Draggable功能中切换鼠标光标（开手/合手）

其实不用找额外的光标库，CSS原生就支持对应的光标样式，主流浏览器都能识别grab（未拖动时的开手）和grabbing（拖动中的合手），搭配jQuery UI的Draggable事件就能轻松实现效果，具体步骤如下：

1. 准备基础依赖
   确保你的项目里已经引入了jQuery和jQuery UI（Draggable是jQuery UI的组件，必须先加载这两个文件）

2. 设置元素样式
   给可拖动的管道方块设置初始光标，同时定义拖动状态下的光标样式：

   .pipe-block {
     width: 100px;
     height: 100px;
     background: #4CAF50;
     cursor: grab; /* 默认显示开手光标 */
   }
   /* 拖动状态下的光标样式，加前缀兼容旧版浏览器 */
   .pipe-block.grabbing {
     cursor: grabbing;
     cursor: -moz-grabbing;
     cursor: -webkit-grabbing;
   }
   

3. 初始化Draggable并绑定事件
   利用Draggable的start（拖动开始）和stop（拖动结束）事件，切换元素的类来改变光标：

   $(function() {
     // 初始化可拖动元素
     $(".pipe-block").draggable({
       start: function() {
         // 拖动开始时添加grabbing类，触发合手光标
         $(this).addClass("grabbing");
       },
       stop: function() {
         // 拖动结束时移除类，恢复开手光标
         $(this).removeClass("grabbing");
       }
     });
   });
   

4. HTML结构示例
   基础的可拖动方块元素：

   <div class="pipe-block">管道方块</div>
   

这样就能实现拖动时光标的切换了，完全不需要额外的光标库，纯CSS+jQuery UI就能搞定。

内容的提问来源于stack exchange，提问作者VictorMC