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

本文介绍了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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值