jQuery插件2（拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示）

最新推荐文章于 2023-04-07 17:21:08 发布

叶炀

最新推荐文章于 2023-04-07 17:21:08 发布

阅读量5.3k

点赞数 1

分类专栏：学习记录-jQuery 文章标签： jQuery 插件

本文链接：https://blog.csdn.net/yeyang123_fy/article/details/47338181

版权

本文介绍了jQuery UI中的多个插件使用，包括draggable（拖拽）、droppable（放置）、sortable（排序）、accordion（面板折叠）、tabs（横向选项卡）、dialog（对话框）、menu（菜单）、spinner（微调按钮）和tooltip（工具提示），详细讲解了各插件的调用格式和配置选项，帮助开发者实现丰富的交互效果。

摘要由CSDN通过智能技术生成

1、拖曳插件——draggable

通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：

$(selector). draggable({options})

options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

$("#test").draggable({axis:"x"});  //延X轴移动

禁用id号为test的div元素的拖动动作后,重新开启的代码为:

$("#test").draggable("enable");

<body>
        <div id="divtest">
            <div id="x" class="drag">沿x轴拖拽</div>
            <div id="y" class="drag">沿y轴拖拽</div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#x").draggable({containment:"parent",axis:"x"});     //仅延x轴拖拽
                $("#y").draggable({containment:"parent",axis:"y"});     //<span style="font-family: Arial, Helvetica, sans-serif;">仅延y轴拖拽</spa