jquery-UI学习笔记1之拖拽(Draggable)

提高交互性的五种方式：拖拽、消息、变化大小、选择、排序。

这篇日记主要记录下http://jqueryui.com/demos提供的拖拽的demo

DEMO1：简单的默认功能的拖拽

	
			
		
		
		
		
		
		
	s
	
		

			

				
drag me
			
		
	

DEMO2：重写了EVENT回调函数（start drag stop)，并实现对触发动作的计数

	
			
		
		
		
		
		
		
	
	
		

			

				
Drag me to trigger the chain of events.
				
				

					

						"start" invoked 0x
					
					

						"drag" invoked 0x
					
					

						"stop" invoked 0x
					
	

DEMO3：对拖拽方向、范围的限制

	
			
		
		
		
		
		
		
	
	
		

			

				
I can be dragged only vertically
			
			

				
I can be dragged only horizontally
			
			
			

				

					
I'm contained within the box
				
				

					
I'm contained within the box's parent
				
				

					
I'm contained within my parent
				
			
		
	

DEMO4：拖拽的最小距离限制（意思就是拖拽走了多远才会动）、拖拽的时间限制

	
			
		
		
		
		
		
		
	
	
		

			

				
Only if you drag me by 20pixels, the dragging will start
			
			

				
Regradless of the distance, you have to drag and wait for 1000ms before dragging starts
			
		
	

DEMO5：拖拽控件急促贴边的效果

	
			
		
		
		
		
		
		
	
	
		

			

				
I'm a snap target
			
			
			

			

				
Default snap
			
			

				
Only snap the big box
			
			

				
Only snap the outer edges of the big box
			
			

				
Only snap to 20*20 grid
			
			

				
Only snap to 80*80 grid
			
		
	

DEMO6：自动 的滚动条

其中一个是默认模式，一个灵敏性较高，一个速度较快

$( "#draggable" ).draggable({ scroll: true });
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });

DEMO7：恢复位置，拖拽以后控件位置可以自动恢复

$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });

DEMO8：