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如下的版本.