定义和用法

当拖拽对象时定位光标。默认情况下,光标是出现在被拖拽对象的中间。使用cursorAt选项来指定相对于draggable的另一个位置(指定一个相对于top、right、bottom、left的像素值)。通过提供一个带有有效的CSS光标值的cursor选项,来自定义光标的外观


示例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>光标样式</title><linkrel="stylesheet"href="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css"><style>#draggable1,#draggable2,#draggable3,#draggable4,#draggable5,#draggable6{width:100px;height:100px;padding:0.5em;float:left;margin:010px10px0;}</style></head><body><divid="draggable1"class="ui-widget-content"><p>我总是在中间(相对于鼠标)</p></div><divid="draggable2"class="ui-widget-content"><p>我的光标是在left-5和top-5</p></div><divid="draggable3"class="ui-widget-content"><p>我的光标位置只控制了'top'值</p></div><divid="draggable4"class="ui-widget-content"><p>我的光标位置只控制了'right'值</p></div><divid="draggable5"class="ui-widget-content"><p>我的光标位置只控制了'bottom'值</p></div><divid="draggable6"class="ui-widget-content"><p>我的光标位置只控制了'left'值</p></div><scriptsrc="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/external/jquery/jquery.js"type="text/javascript"></script><scriptsrc="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script><script>$("#draggable1").draggable({cursor:"move",cursorAt:{top:56,left:56}});$("#draggable2").draggable({cursor:"move",cursorAt:{top:-5,left:-5}});$("#draggable3").draggable({cursor:"move",cursorAt:{top:0}});$("#draggable4").draggable({cursor:"move",cursorAt:{right:0}});$("#draggable5").draggable({cursor:"move",cursorAt:{bottom:0}});$("#draggable6").draggable({cursor:"move",cursorAt:{left:0}});</script></body></html>


输出