jquery-ui 之draggable詳解

舉一個例子:css

<div class="box">jquery

     <div id="draggable">瀏覽器

      <p>Drag me around</p>ui

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

     </div>spa

</div>插件

使用方法:對象

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

注意:使用以前要加上  jquery  和  jquery-ui  兩個類庫。ci

注意: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);

相關文章
相關標籤/搜索