公司网站建设方案详细自己做的美食分享到网站
张小明 2026/3/12 13:30:32
公司网站建设方案详细,自己做的美食分享到网站,网页游戏搬砖赚钱,公司起名在线生成器jQuery UI Sortable#xff08;排序#xff09;实例
jQuery UI 的 Sortable 交互允许用户通过鼠标拖拽对列表项进行排序#xff0c;非常适合实现任务管理、菜单排序、看板#xff08;Kanban#xff09;等功能。它基于 Draggable 和 Droppable 构建#xff0c;支持占位符…jQuery UI Sortable排序实例jQuery UI 的Sortable交互允许用户通过鼠标拖拽对列表项进行排序非常适合实现任务管理、菜单排序、看板Kanban等功能。它基于 Draggable 和 Droppable 构建支持占位符、连接列表等高级特性。推荐查看官方演示https://jqueryui.com/sortable/下面提供几个渐进实例从基础到高级代码使用最新 CDN可直接复制到 HTML 文件测试。1.基础排序示例拖拽列表项改变顺序。!DOCTYPEhtmlhtmlheadmetacharsetutf-8titlejQuery UI Sortable 基础示例/titlelinkrelstylesheethref//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.cssscriptsrc//code.jquery.com/jquery-3.6.0.min.js/scriptscriptsrc//code.jquery.com/ui/1.13.2/jquery-ui.min.js/scriptstyle#sortable{list-style-type:none;margin:0;padding:0;width:300px;}#sortable li{margin:5px;padding:10px;font-size:1.2em;background:#f0f0f0;cursor:move;}#sortable li.ui-sortable-helper{background:#ffeb3b;}/style/headbodyulidsortableliclassui-widget-content项目 1/liliclassui-widget-content项目 2/liliclassui-widget-content项目 3/liliclassui-widget-content项目 4/liliclassui-widget-content项目 5/li/ulscript$(function(){$(#sortable).sortable();});/script/body/html2.占位符与手柄placeholder、handleplaceholder拖拽时显示占位框。handle仅指定手柄区域可拖拽排序。style.placeholder{border:2px dashed #ccc;background:#fff;height:40px;}.handle{float:left;cursor:move;margin-right:10px;}/styleulidsortable2lispanclasshandle ui-icon ui-icon-grip-dotted-vertical/span仅手柄排序带占位符/li!-- 更多项 --/ulscript$(#sortable2).sortable({placeholder:placeholder,// 占位符类handle:.handle,// 仅手柄拖拽opacity:0.7// 拖拽时半透明});/script3.连接列表connectWith多个列表间可互相拖拽排序常用于看板如待办/进行中/完成。divstyledisplay:flex;gap:20px;divh3待办/h3ulidtodoclassconnectedSortableli任务 A/lili任务 B/li/ul/divdivh3进行中/h3uliddoingclassconnectedSortable/ul/divdivh3完成/h3uliddoneclassconnectedSortableli任务 C/li/ul/div/divstyle.connectedSortable{min-height:200px;width:200px;border:1px solid #ccc;padding:10px;}.connectedSortable li{margin:5px;padding:10px;background:#fff;}/stylescript$(.connectedSortable).sortable({connectWith:.connectedSortable,// 连接所有同类列表placeholder:placeholder});/script4.事件回调update、receive与获取顺序update列表内排序变化时触发。receive从其他列表接收项时触发。使用toArray()获取当前顺序。p当前顺序:spanidorder/span/pscript$(#sortable).sortable({update:function(event,ui){varorder$(this).sortable(toArray);// 获取项ID数组需给li加id$(#order).text(order.join(, ));console.log(新顺序:,order);}});/scriptSortable 支持网格排序grid、延迟启动delay、禁用某些项cancel等更多选项。常用于后台菜单管理或任务拖拽。如果你需要保存排序到服务器的 AJAX 示例、带延迟/网格的实例或与 Selectable 结合的多选排序请提供更多细节