JQuery之UI插件

1、拖曳插件之traggable

拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:

$(selector). draggable({options})

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

例如,在页面中的

元素中添加两个子类
,通过与拖曳插件绑定,这两个子类
元素只能在外层的父
元素中任意拖曳,

 


        拖曳插件
        
        
        
    
    
    
        
沿x轴拖拽
沿y轴拖拽


2、放置插件之droppable

 

除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:

$(selector).droppable({options})

selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。

例如,在页面中,通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中,同时改变“购物车”的背景色和数量值,

 


        放置插件
        
        
        
    
    
    
        
产品区
苹果
回收站
还没有产品

3、拖曳排序插件sortabe

拖曳排序插件的功能是将序列元素(例如

  • )按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:

    $(selector).sortable({options});

    selector参数为进行拖曳排序的元素,options为调用方法时的配置对象,

    例如,在页面中,通过加载sortable插件将
  • 你可能感兴趣的:(JQuery)