诸如此类的事情。两个包含，右边的包含会选择自己喜欢的项目，然后用鼠标选择一些，把右边的项目放在左边的包含。那些项目不能超出这两个包含。有些样式不会改变，就像margin。对我来说，我首先想到的是使用jQuery UI，但是在阅读了ui.jquery.com之后，我什么也没有得到只有可拖动和可放置的东西。对我来说不好。看我的html：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.seven-first {
width: 48px;
text-align: right;
float: left;
margin-right: 22px;
}
span.selected {
display: inline;
width: 306px;
height: 178px;
background: #fbfbfb;
float: left;
}
.bock {
float:left; display: inline;
width: 18px; height: 30px;
margin: 75px 20px auto 23px;
}
.seven-right {
float: left; display: inline; position: relative;
}
.seven-right span {
margin-right: auto;
}
.seven-right .second {
width: 290px;
height: 84px;
margin-left: 24px;
}
.seven-right .second b {
margin-top: 12px;
display: inline-block;
font-weight: normal;
}
.seven-right .second .tag {
float: left;
list-style: none;
width: 223px;
margin-top: 12px;
text-align: left;
*margin-top: -20px;
}
.seven-right .second .tag li {
padding-left: 10px;
margin: 0 10px 10px auto;
display: inline-block;
border: 1px solid red;
}
.seven-right .second .tag span {
padding-top: 2px;
}
.seven-right .second .tag li span {
width: auto;
margin-right: auto;
text-align: left;
}
div.noexist {
float: left;
margin-top: 13px;
}
</style>
<script src="../jquery-1.10.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li class="seven">
<span class="seven-first clear">all need</span>
<span class="selected"></span>
<span class="bock"></span>
<span class="clear selected seven-right">
<span class="second">
<b>choose:</b>
<ul class="tag">
<li><span>html5</span></li>
<li><span>css3</span></li>
<li><span>jQuery</span></li>
<li><span>PHP</span></li>
<li><span>Python</span></li>
<li><span>Java</span></li>
</ul>
</span>
<div class="noexist">
<span>no?</span>
<input id="" name="" type="text" /><a href="#">add on</a>
</div>
</span>
</li>
</ul>
</body>
</html>
将项目从右侧拖拽到左侧包含，其他地方无法提供它们的位置。帮帮我，给我一些建议！jQuery 对我来说并不那么容易。