jquery-ui 之droppable詳解

<div class="special">drop me</div>

<div class="drag-box">

     <div class="selector">

            <p>Drag me around</p>

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

     </div>

</div>   

 

 $(function() {

        $(".special").droppable();   /*啓用元素的拖拽功能*/

        $('.selector').draggable();

  });

 

首先 droppable 是和 draggable配套使用的。 droppable 主要是對 draggable 移動的目標進行設定的。

（一）具體參數的解釋:

 hoverClass: 'droppable-active',    /*當一個元素被落在嵌套droppables時候，droppables增長的class類名*/

 addClasses: false,    /*是否添加默認的ui裏面的class (class名字爲ui-droppable) 值爲false或是true*/

 activeClass: "ui-state-highlight", /*當一個元素執行拖動事件的時候,該元素添加的class類名*/

 disabled:false ,                   /*表示事件觸發或是放棄 false或是true*/

     參數的使用方法:

 $(".special").droppable({

     hoverClass: 'droppable-active',   

     addClasses: false,    

     activeClass: "ui-state-highlight", 

     disabled:false 

 });

(二) 具體的事件的解釋:

drop: function(){                  /*當一個元素被落在嵌套droppables時候,執行的方法 */

},

activate:function(){               /*當draggable觸發的時候，執行的事件*/

},

create:function(){                 /*當draggable建立的時候,執行的事件*/ 

},

create:function(){    /*當draggable中止的時候,執行的事件*/

},

out:function(){ /*當draggable進入到droppable元素內後,又離開邊界的時候，執行的方法*/

},

over:function(){  

/*當一個元素進入到droppables的時候,執行的方法  這個方法有別於drop drop表示的是進去的時候，中止的時候執行的; over表示的是進去的時候執行的方法*/

}

  事件的使用方法:

 $(".special").droppable({

     drop:function(){

     }, 

     activate:function(){

     },    

     create:function(){

     },

     ...

 });

(三) 具體的參數的使用方法:

 

    $(".special").droppable("destroy");  /*從元素中移除拖拽功能*/

    $(".special").droppable("disable");  /*禁止元素的拖拽功能*/

   $(".special").droppable("enable");   /*是元素啓用拖拽功能*/

 

注意: 1 droppable 和 draggable 是配套使用的

      2 寫對象的時候，最後面的一個, 不要加上,ie6 7不兼容，會報錯

        好比 var object = {

                    a:001,

                    b:002  /*b是一個對象的最後一個元素，不能給加上, 這樣會致使錯誤.*/

                 }  

      3 jquery 2.0以上不支持 ie 6 7 8 因此要是項目須要支持ie6 7 8的話須要引用jquery2.0如下的版本.