JqueryUI draggable用法
JqueryUI draggable用法
王中艺 发表于2年前
JqueryUI draggable用法
  • 发表于 2年前
  • 阅读 18
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

  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] )

  102. 资料:http://www.tuicool.com/articles/A3iy6b

  103. 来源: <http://www.cnblogs.com/rabbit2012/archive/2013/02/22/2922007.html>



共有 人打赏支持
粉丝 2
博文 3
码字总数 6216
×
王中艺
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: