关于jquery-ui,页面横向纵向拖动布局的方法。

最新推荐文章于 2025-10-29 12:32:52 发布

原创最新推荐文章于 2025-10-29 12:32:52 发布 · 1.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍如何利用jQuery库中的sortable插件实现网页元素的拖拽操作，并在用户完成排序后将排序信息保存至服务器端。通过实例演示了如何配置插件属性以实现特定需求，包括自定义拖动效果、透明度调整、动画效果及排序信息的持久化。

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏，讲透 AI 如何接管脏活累活

一键订阅

js里面全部:

$(function() {
    $( ".sortable" ).sortable({
    placeholder: "ui-state-highlight" , //拖动时，用css
    cursor: "move",            //鼠标移动上去显示的形状
axis : "x",                    //横向 x和y
    items :"a",                        //只是div可以拖动
    opacity: 0.6,                       //拖动时，透明度为0.6
    revert: true,                       //释放时，增加动画
    update : function(event, ui){       //更新排序之后
var text = "";
        $(".sortable a").each(function(i){
text = text+$(this).attr("name")+",";
})
$.ajax({
url:"<%=basePath%>/p/orderBy/saveOrderById?ids="+text,
type:"get",
dataType:"json",
async:false,
success:function(data){
}
});
}
   });
 });

body里面全部:

<div class="sortable">
    <a class="ui-state-default" >拖我撒1</a>
    <a class="ui-state-default" >拖我撒2</a>
    <a class="ui-state-default" >拖我撒3</a>
    <a class="ui-state-default" >拖我撒4</a>  
</div>

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏，讲透 AI 如何接管脏活累活

一键订阅