jQuery实现容器间的元素拖拽功能

本文实例为大家分享了jQuery实现容器间的元素拖拽，供大家参考，具体内容如下

在html中准备三个容器

 

 
A
 
B
 
C
 
e
 
f
 
g
 
 

 

在css中，给容器写上样式相应的样式

.container ul{
 width: 350px;
 padding: 15px;
 min-height:300px;
 background-color:#FFFFF0;
 margin:20px;
 display: inline-block;
 border-radius: 5px;
 border: 1px solid #C6C8CA;
 }
 .container ul li{
 display: block;
 float: left;
 width: 350px;
 height: 35px;
 line-height: 35px;
 border-radius: 4px;
 margin: 0;
 padding: 0;
 list-style: none;
 background-color:yellow;
 margin-bottom:10px;
 -moz-user-select: none;
 user-select: none;
 text-indent: 10px;
 color: #555;
}

js代码

首先引用jquery的js文件

在script的标签中，开始写js代码。

最后实现的效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。