JqueryUI draggable用法

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>