定义和用法

draggable上的start、drag和stop事件。拖拽开始时触发start事件，拖拽期间触发drag事件，拖拽停止时触发stop事件


示例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>jQueryUI拖动（Draggable）-事件</title><linkrel="stylesheet"href="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css"><style>#draggable{width:16em;padding:01em;}#draggableulli{margin:1em0;padding:0.5em0;}#draggableullispan.ui-icon{float:left;}#draggableullispan.count{font-weight:bold;}</style></head><body><divid="draggable"class="ui-widgetui-widget-content"><p>请拖拽我，触发一连串的事件。</p><ulclass="ui-helper-reset"><liid="event-start"class="ui-state-defaultui-corner-all"><spanclass="ui-iconui-icon-play">"start"被调用</span><spanclass="count">0</span>x"start"被调用</li><liid="event-drag"class="ui-state-defaultui-corner-all"><spanclass="ui-iconui-icon-arrow-4">"drag"被调用</span><spanclass="count">0</span>x"drag"被调用</li><liid="event-stop"class="ui-state-defaultui-corner-all"><spanclass="ui-iconui-icon-stop">"stop"被调用</span><spanclass="count">0</span>x"stop"被调用</li></ul></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>//获取对象var$start_counter=$("#event-start"),$drag_counter=$("#event-drag"),$stop_counter=$("#event-stop"),counts=[0,0,0];$("#draggable").draggable({start:function(){counts[0]++;updateCounterStatus($start_counter,counts[0]);},drag:function(){counts[1]++;updateCounterStatus($drag_counter,counts[1]);},stop:function(){counts[2]++;updateCounterStatus($stop_counter,counts[2]);}});/***更新数值*@param{[object]}$event_counter[li对象]*@param{[int]}new_count[次数]*/functionupdateCounterStatus($event_counter,new_count){if(!$event_counter.hasClass('ui-state-hover')){$event_counter.addClass('"ui-state-hover"').siblings().removeClass('ui-state-hover');}$("span.count",$event_counter).text(new_count);}</script></body></html>


输出