首页 > 代码库 > jquery-ui 之draggable详解

jquery-ui 之draggable详解

举一个例子:

<div class="box">

     <div id="draggable">

      <p>Drag me around</p>

            <a class="test">notDrag me</a>

     </div>

</div>

使用方法:

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

注意:使用之前要加上  jquery  和  jquery-ui  两个类库。

注意:jquery 2.0以上不支持ie6 7 8 ,所以想让所以浏览器都支持插件中的东西,请使用jquery2.0以下的版本。

 

(一)具体参数的解释:

1 zIndex:  100   //表示拖动的时候给拖动的标签加上的z-index值,不拖动的时候,z-index值还原。

2 containment: "parent"    //表示移动的范围是针对  父级元素,不会超过父级元素。

  containment: ".box"      //表示移动的范围是在  box 的内部,不会在box外部移动。

3 axis: "x",    //表示只可以在x轴上移动

  axis: "y"      //表示只可以在y轴上移动。

4 cancel: ".test"   //表示取消 class="test" 标签的拖拽

5 cursor: "pointer"   //标签拖动的时候,鼠标的状态。

6 delay: "300"     //表示拖动的时候,拖动延迟。

7 disabled: "false"    //表示是禁止或是执行。

8 opacity: 0.5  //表示拖动的时候,调整透明度

9 addClass: false //表示是否添加class

10 revert: true  //表示 停止的时候是否回到初始的位置;

11 revertDuration: 200   //表示停止的时候回到默认设置的时间  

使用方法:

$("#draggable").draggable(function(){

    zIndex:100,

    containment:"parent",

    axis:"x",

    cancel:".test",

    ......

});

 

(二)具体事件的解释:

create: function(event,ui){   //创建的时候,执行的方法, 比如添加css或是别的。 

                              //ui.position 表示相对当前对象,鼠标的坐标值对象{top,left}       

                              //ui.offset           表示相对于当前页面,鼠标的坐标值对象{top,left}        

}

drag: function(){    //拖拽的时候,执行的方法, 比如添加css或是别的。 

}

start:function(){   //开始的时候,执行的方法 ,比如添加css或是别的。

}

stop:function(){   //停止的时候, 执行的方法,比如移除css或是别的。

}

具体的使用事件的方法:

$("#draggable").draggable(function(){

    create:function(){

        $(this).addClass("cur");

    },

    drag:function(){

        $(this).addClass("active");

    },

    start:function(){

        $(this).addClass("active");

    },

    stop:function(){

        $(this).removeClass("active");

    }

}); 

 

(三)具体方法的解释:

 

destory   删除拖拽功能,

disable   拖动禁用

enable    拖动使用

option    

widget

 

具体的使用事件的方法:

$("#draggable").draggable(destory);