このようなもの。2 つの内容、右の内容はお気に入りのアイテムを選択し、マウスを使用していくつかを選択し、右の項目を左の内容に配置します。これらの項目は、これら 2 つの内容を超えることはできません。私にとっては、最初は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はそれほど簡単ではありません。