jquery UI 跟随学习笔记——拖放(Droppable)

javascript cooljun 337℃ 0评论
[javascript] view plaincopy

  1. ·概述  
  2. 配合draggable插件,允许拖放到任何DOM元素内。  
  3. 官方示例地址:http://jqueryui.com/demos/droppable/  
  4.   
  5. 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象  
  6. ui.draggable – 表示当前被拖拽的元素的JQuery对象  
  7. ui.helper – 表示当前被拖放的元素的JQuery对象  
  8. ui.position – 表示当前被拖拽的相对坐标值对象{top,left}  
  9. ui.offset – 表示当前被拖拽的元素的绝对坐标值对象{top,left}  
  10.   
  11. ·参数(参数名 : 参数类型 : 默认值)  
  12. accept : Selector, Function : ‘*’  
  13.   仅允许符合适配器的元素激活拖放的事件。(如果是函数,则此函数会在页面上所有元素被调用,函数的返回值必须是布尔值。)  
  14.   初始:$(‘.selector’).droppable({ accept: ‘.special’ });  
  15.   获取:var accept = $(‘.selector’).droppable(‘option’‘accept’);  
  16.   设置:$(‘.selector’).droppable(‘option’‘accept’‘.special’);  
  17.   
  18. activeClass : String : false  
  19.   如果设置值,则当有拖拽事件发生时,为页面上所有允许(accept)的元素添加此样式。  
  20.   初始:$(‘.selector’).droppable({ activeClass: ‘ui-state-highlight’ });  
  21.   获取:var activeClass = $(‘.selector’).droppable(‘option’‘activeClass’);  
  22.   设置:$(‘.selector’).droppable(‘option’‘activeClass’‘ui-state-highlight’);  
  23.   
  24. addClasses : Boolean : true  
  25.   设置为false,可以阻止ui-droppable样式添加至可拖放的对象。(这样可以获取一定的性能优化)  
  26.   初始:$(‘.selector’).droppable({ addClasses: false });  
  27.   获取:var addClasses = $(‘.selector’).droppable(‘option’‘addClasses’);  
  28.   设置:$(‘.selector’).droppable(‘option’‘addClasses’false);  
  29.   
  30. greedy : Boolean : false   
  31.   是否防止嵌套的droppable事件被传播。  
  32.   初始:$(‘.selector’).droppable({ greedy: true });  
  33.   获取:var greedy = $(‘.selector’).droppable(‘option’‘greedy’);  
  34.   设置:$(‘.selector’).droppable(‘option’‘greedy’true);  
  35.   
  36. hoverClass : String : false   
  37.   当拖拽元素移至带有可拖放插件的元素上时,为元素添加指定的样式。  
  38.   初始:$(‘.selector’).droppable({ hoverClass: ‘drophover’ });  
  39.   获取:var hoverClass = $(‘.selector’).droppable(‘option’‘hoverClass’);  
  40.   设置:$(‘.selector’).droppable(‘option’‘hoverClass’‘drophover’);  
  41.   
  42. scope : String : ‘default’  
  43.   设置元素只允许具有相同scope值拖拽元素激活此拖放元素。  
  44.   初始:$(‘.selector’).droppable({ scope: ‘tasks’ });  
  45.   获取:var scope = $(‘.selector’).droppable(‘option’‘scope’);  
  46.   设置:$(‘.selector’).droppable(‘option’‘scope’‘tasks’);  
  47.   
  48. tolerance : String : ‘intersect’   
  49.   判断一个可拖拽元素被【放到】一个可拖放元素的判断模式。(可选值:‘fit’‘intersect’‘pointer’‘touch’)  
  50.   fit:拖拽元素完全覆盖拖放元素  
  51.   intersect:拖拽元素至少50%覆盖拖放元素  
  52.   pointer:鼠标指针重叠在可拖放元素上  
  53.   touch:只要有任何重叠即发生  
  54.   初始:$(‘.selector’).droppable({ tolerance: ‘fit’ });  
  55.   获取:var tolerance = $(‘.selector’).droppable(‘option’‘tolerance’);  
  56.   设置:$(‘.selector’).droppable(‘option’‘tolerance’‘fit’);  
  57.   
  58.     
  59. ·事件  
  60. activate  
  61.   当任何可拖拽元素开始拖拽动作时激活此事件。  
  62.   初始:$(‘.selector’).droppable({ activate: function(event, ui) { … } });  
  63.   绑定:$(‘.selector’).bind(‘dropactivate’function(event, ui) {  … });  
  64.   
  65. deactivate  
  66.   当任何可拖拽元素停止拖拽动作时激活此事件。  
  67.   初始:$(‘.selector’).droppable({ deactivate: function(event, ui) { … } });  
  68.   绑定:$(‘.selector’).bind(‘dropdeactivate’function(event, ui) { … });  
  69.   
  70. over  
  71.   当一个被允许(accept)的可拖拽元素移动并覆盖可拖放元素时激活。  
  72.   初始:$(‘.selector’).droppable({ over: function(event, ui) { … } });  
  73.   绑定:$(‘.selector’).bind(‘dropover’function(event, ui) { … });  
  74.   
  75. out  
  76.   当一个被允许(accept)的可拖拽元素移出可拖放元素时激活。  
  77.   初始:$(‘.selector’).droppable({ out: function(event, ui) { … } });  
  78.   绑定:$(‘.selector’).bind(‘dropout’function(event, ui) { … });  
  79.   
  80. drop  
  81.   当一个被允许(accept)的可拖拽元素移动并覆盖可拖放元素,松开鼠标时激活。  
  82.   初始:$(‘.selector’).droppable({ drop: function(event, ui) { … } });  
  83.   绑定:$(‘.selector’).bind(‘drop’function(event, ui) { … });  
  84.   
  85.   
  86. ·方法  
  87. destory  
  88.   从元素中移除拖拽功能。  
  89.   用法:.droppable( ‘destroy’ )  
  90.   
  91. disable  
  92.   禁用元素的拖拽功能。  
  93.   用法:.droppable( ‘disable’ )  
  94.   
  95. enable  
  96.   启用元素的拖拽功能。  
  97.   用法:.droppable( ‘enable’ )  
  98.   
  99. option  
  100.   获取或设置元素的参数。  
  101.   用法:.droppable( ‘option’ , optionName , [value] )  

转载请注明:cooljun小站 » jquery UI 跟随学习笔记——拖放(Droppable)

如果你觉得这篇文章对你有帮助,请支持我继续更新网站 !捐赠本站
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址