定义和用法
draggable 上的,首先,drag 和,stop 事件。拖拽开始时触发,start 事件,拖拽期间触发,drag 事件,拖拽停止时触发, stop 事件
示例
& lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt; meta charset=" utf - 8 "比;
& lt; meta http-equiv=" X-UA-Compatible ",内容=癐E=边缘”比;
& lt; title> jQuery UI 拖动(拖),安康;事件& lt;/title>
& lt; link rel="样式表",href=" https://www.yisu.com/zixun/js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css "比;
& lt; style>
可拖动的{#
宽度:16 em;
填充:0,1 em;
}
李# draggable ul {
保证金:1 em 0;
填充:0.5 em 0;
}
# draggable ul li span.ui-icon {
浮:左;
}
# draggable ul li span.count {
粗细:大胆的;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id="拖",类=皍i-widget ui-widget-content”比;
& lt; p>请拖拽我,触发一连串的事件。;/p>
& lt; ul 类=皍i-helper-reset”比;
& lt; li id=笔录?类=皍i-state-default ui-corner-all”比;
& lt; span class=" ui-icon ui-icon-play”在“开始”,被调用& lt;/span>
& lt; span 类=凹剖痹? & lt;/span> x “开始”,被调用
& lt;/li>
& lt; li id=" event-drag ",类=皍i-state-default ui-corner-all”比;
& lt; span class=" ui-icon ui-icon-arrow-4”在“拖”,被调用& lt;/span>
& lt; span 类=凹剖痹? & lt;/span> x “拖”,被调用
& lt;/li>
& lt; li id=" event-stop ",类=皍i-state-default ui-corner-all”比;
& lt; span class=" ui-icon ui-icon-stop”在“停止”,被调用& lt;/span>
& lt; span 类=凹剖痹? & lt;/span> x “停止”,被调用
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; script src=" https://www.yisu.com/zixun/js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/external/jquery/jquery.js ", type=" text/javascript,祝辞& lt;/script>
& lt; script src=" https://www.yisu.com/zixun/js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js "祝辞& lt;/script>
& lt; script>//获取对象
var start_counter 美元=,$(“#事件起始日期”),
drag_counter 美元;=,$ (" # event-drag "),
stop_counter 美元;=,$ (" # event-stop "),
counts =, (0, 0, 0);
$(" #可拖放”).draggable ({
开始:函数(){
数[0]+ +;
updateCounterStatus (start_counter美元,数[0]);
}，
阻力:函数(){
计算[1]+ +;
updateCounterStatus (drag_counter美元,计算[1]);
}，
停止:函数(){
数[2]+ +;
updateCounterStatus (stop_counter美元,数[2]);
}
}）;/* *
,*更新数的值
,* @param ,{(对象)},event_counter 美元;[李对象)
,* @param , {(int)}, new_count ,,,,,(次数)
,*/function updateCounterStatus ($ 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);
}
& lt;/script>
& lt;/body>
& lt;/html>
输出
