jquery.ui.droppable中文文档

 XML格式, 便于后期排版方便,  每一部分翻译完成之后, 都会在我的博客和http://www.heyjava.com同步更新.

 

 

 


 
  
   
  
  
   
    
    
    
   
   
    
    
    
   
  
  
    所有的回调函数(active, deactive, over, out, drop等事件)接受两个参数:
  event: 浏览器原生的事件
  ui: 一个JQuery的ui对象, 其中有以下主要属性
   ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
   ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
   ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域.   html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)]]>
  
  
   
    
     
     
      
     
    
    
    
     
      
      
     
     
      
         获取.selector选择器选中的droppable控件的accept选项的值.]]>
     
     
      
      
     
    
   
   
    
     
    
    
    
     
      
      
     
     
      
      ]]>
     
     
      
      
     
     
      
      



 

Drag me to my target

 

Drag me to my target

 

Drop here

 

Drop here

      ]]>
     
    
   
   
    
     
    
       true表示ui-droppable样式被添加到该元素.
   false表示ui-droppable样式不被添加到该元素.]]>
    
     
      
      
     
     
      
      
     
     
      
      
     
    
   
   
    
     
    
    
     
     
     
    
         该选项只影响drop事件, 其他事件经过测试不会传播.
     事件传播是合理的, 但是在有些情况下是不需要的或会引发混乱, 比如: div中包含了一个a标签, 那么点击a的时候, 实际上也是点击了div, 因为a在它中间嘛.]]>
    
     
      
      
     
     
      
      
     
     
      
      
     
     
      
      

greedy测试draggable

父元素
 

子元素

      ]]>
     
    
   
   
    
     
     
    
    
    
     
      
      
     
     
      
      ]]>
     
     
      
      
     
    
   
   
    
     
     
    
    
     
     
    
       例如:
   $('#draggable_a').draggable({scope: 'a'});
   $('#draggable_b').draggable({scope: 'b'});
   $('#droppable_a').droppable({scope: 'a'});
   $('#droppable_b').droppable({scope: 'b'});
   droppable控件的accept选项默认是'*', 看起来数draggable_a, draggable_b可以自由的放入到droppable_a和droppable_b中, 但是, 由于scope的约束, draggable_a只能放入到droppable_a, draggable_b只能发乳到droppable_b中.
   注意: 这个选项就和变量的名称空间的意义类似. 默认值是'default', 说明如果不指定, 大家都还是有scope的, 名字是default而已.]]>
    
     
      
      
     
     
      
      
     
     
      
      
     
    
   
   
    
     
      
       
        
        
       
       
        
        
       
       
        
        
       
       
        
        
       
      
     
    
    
    
     
      
      
     
     
      
      
     
     
      
      
     
    
   
  
  
   
    
    
     
      
     
     
      
     
    
    
    
     
      
               activate: function(event, ui) { ... }
      });]]>
     
     
      
              ...
      });]]>
     
    
   
   
    
    
     
      
     
     
      
     
    
    
    
     
      
               deactivate: function(event, ui) { ... }
      });]]>
     
     
      
      $('.selector').bind('dropdeactivate', function(event, ui) {
  ...
});
      ]]>
     
    
   
   
    
    
     
      
     
     
      
     
    
    
    
     
      
      $('.selector').droppable({
   over: function(event, ui) { ... }
});
      ]]>
     
     
      
      $('.selector').bind('dropover', function(event, ui) {
  ...
});
      ]]>
     
    
   
   
    
    
     
      
     
     
      
     
    
    
    
     
      
      $('.selector').droppable({
   out: function(event, ui) { ... }
});
      ]]>
     
     
      
      $('.selector').bind('dropout', function(event, ui) {
  ...
});
      ]]>
     
    
   
   
    
    
     
      
     
     
      
     
    
    
    
     
      
      $('.selector').droppable({
   drop: function(event, ui) { ... }
});
      ]]>
     
     
      
      $('.selector').bind('drop', function(event, ui) {
  ...
});
      ]]>
     
     
      
      

hover draggable

hover_droppable

      ]]>
     
    
   
  
  
   
    
    
     
      
     
    
   
   
    
    
     
      
     
    
   
   
    
    
     
      
     
    
   
   
    
     
     
    
    
    
     
      
     
    
   
  
    呵呵, 将draggable和droppable结合起来, 就以这个例子作为结束吧. 没有源码中涉及的图标没有的朋友可以去下载, 就是一个文件夹图标, 一个文件图标, 一个回收站图标. 48*48大小的.



 
 
 
 
 
 
 
 
 

文件夹回收站

文件回收站

]]>