jquery实现两个div中的元素相互拖动的方法分析

本文实例讲述了jquery实现两个div中的元素相互拖动的方法。分享给大家供大家参考，具体如下：

这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。

第一个效果图：

拖动中：

拖动完成后：

代码实现：

	
		
		
		
		
		
		
	
 
	
		
			
				
123
				
123
				
123
			
	
			
				
234
				
234
				
234
				
234
			
			
			
				
345
				
345
				
345
				
345
			
		
	
 

第二个实例：

效果图：

初始状态

拖动中：

拖动完成后

代码实现：

 
	
		
		
		
		
		
		
			#sortable {
				list-style-type: none;
				margin: 0;
				padding: 0;
				width: 60%;
			}
			
			#sortable li {
				margin: 0 3px 3px 3px;
				padding: 0.4em;
				padding-left: 1.5em;
				font-size: 1.4em;
				height: 18px;
			}
			
			#sortable li span {
				position: absolute;
				margin-left: -1.3em;
			}
		
		
	
 
	
 
		

			
Item 1
			
Item 2
			
Item 3
			
Item 4
			
Item 5
			
Item 6
			
Item 7
		
 
	
 

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。