jquery ui droppable使用

jquery ui 提供了 许多好用并且精美的 工具和widget，特效等

其中包括 draggalbe(拖放对象)、droppable(允许拖放到某对象中)、resizable（可自由拉动大小）、dialog(对话框)、datepicker（日期工具）、autocomplete(输入联想提示).可以说jquery ui 几乎涵盖了许多 互动ui效果，后续还有可能添加其他功能木块，其官网为http://jqueryui.com, 要想使用上述功能请下载http://jqueryui.com/download/,截止本文版本为1.9.0。

本文主要想描述的是jquery的拖放和施放功能，这个功能使用好的话，可用作可视化的模板，所见即所得思想、如visualstudio 功能，左边工具栏，将工具栏内的工具碎片拉到右边面板中即可看到想要的页面效果。

前边已有一篇文章说明了draggalbe这个功能，这篇文章主要描述droppable.

draggable主要功能是讲对象木块进行拖曳， 而droppable功能主要是 允许某移动对象的是施放， 并且可以监控移动对象拖到droppalble对象之上，和施放之后可以做的逻辑。

下边描述这个接口的使用

 1、事件

  （1）activate

     [产生影响]

         这个事件会在任何允许的draggable对象开始拖动时触发.

          它可以用来在你想让droppable对象在可以被填充的时"亮起来"的时候.

     [代码示例]

      $('.selector').droppable({  activate:function(event, ui) { ... }  });

  （2）deactivate

    [产生影响]

         此事件会在任何允许的draggable对象停止拖动时触发.

    [代码示例]

         $('.selector').droppable({    deactivate: function(event, ui) { ... }  });

  （3）over

    [产生影响]

      此事件会在一个允许的draggable对象"经过"(根据tolerance参数的定义判断)这个droppable对象时触发.

    [代码示例]

         $('.selector').droppable({    over: function(event, ui) { ... }  });

  （4）out

    [产生影响]

        会在一个允许的draggable对象离开(根据tolerance参数的定义判断)这个droppable对象时触发.

    [代码示例]

        $('.selector').droppable({    out: function(event, ui) { ... }  });

  （5）drop

    [产生影响]

        这个事件会在一个允许的draggable对象填充进这个droppable对象时触发.

        回调函数中, $(this) 表示被填充的droppable对象.ui.draggable 表示draggable对象.

    [代码示例]

        $('.selector').droppable({    drop: function(event, ui) { ... }  });

 

2、参数（选项）

  （1）accept

    [类型]Selector,Function
   [默认值]'*'
      接受所有符合选择器条件的draggable对象. 如果指定了一个函数,该函数要求为页面上每个draggable对象(符合函数第一个条件的对象)提供一个过滤器.如果要这些元素被dropable接受,该函数需要返回true.

   [代码示例]

      使用指定的accept参数初始化一个droppable.
      $('.selector').droppable({ accept: '.special' });

   (2)activeClass

    [类型]String
    [默认值]false

    [产生影响]
       如果指定了该参数,在被允许的draggable对象填充时,droppable会被添加上指定的样式.

   [代码示例]

       使用指定的activeClass参数初始化一个droppable.
       $('.selector').droppable({ activeClass: '.ui-state-highlight'});

  (3)addClasses

    [类型]Boolean
    [默认值]true

    [产生影响]
      如果设置为false, 可以防止ui-droppable类在进行时添加.这可能会使在初始化数百个元素执行.droppable()时使性能得到理想的优化.

    [代码示例]

       使用指定的addClasses参数初始化一个droppable.
       $('.selector').droppable({ addClasses: false });
   (4)greedy

    [类型]Boolean
    [默认值]false

     [产生影响]
        如果设置为true,将在嵌套的droppable对象中阻止事件的传播.（阻止事件向上冒泡）

    [代码示例]

        使用指定的greedy参数初始化一个droppable.
        $('.selector').droppable({ greedy: true });
  (5)hoverClass

     [类型]String
     [默认值]false

     [产生影响]
          如果设置了该参数,将在一个被允许的draggable对象悬停在droppable对象上时向droppable对象添加一个指定的样式.

      [代码示例]

          使用指定的hoverClass参数初始化一个droppable.
          $('.selector').droppable({ hoverClass: 'drophover' });
   (6)scope

     [类型]String
     [默认值]'default'

      [产生影响]
          用来设置draggle对象和droppable对象的组,除了droppable中的accept属性指定的元素外,和droppable对象相同组的draggable对象也被允许添加到droppable对象中.

     [代码示例]

          使用指定的scope参数初始化一个droppable.
          $('.selector').droppable({ scope: 'tasks' });
   (7)tolerance

     [类型]String

         允许使用的值: 'fit', 'intersect', 'pointer', 'touch'.

             fit: draggable 完全重叠到droppable
             intersect: draggable 和droppable至少重叠50%
             pointer: 鼠标重叠到droppable
             touch: draggable和droppable的任意重叠
     [默认值]'intersect'
     [产生影响]

         指定使用那种模式来测试一个draggable"经过"一个droppable对象.

     [代码示例]

 

         使用指定的tolerance参数初始化一个droppable.
          $('.selector').droppable({ tolerance: 'fit' });