使用jQuery可拖动或称为可拖放？_Jquery_Jquery Ui

使用jQuery可拖动或称为可拖放？

jquery jquery-ui

使用jQuery可拖动或称为可拖放？,jquery,jquery-ui,Jquery,Jquery Ui,像这样的事情。两个包含，右包含是指选择自己喜欢的项目，然后使用鼠标选择一些，然后将右项目放到左包含。这些项目不能超过这两个包含。并且某些样式不会改变，例如边距。对我来说，我首先想用jQuery UI，但在阅读UI.jQuery.com之后，我什么也得不到，只有可拖拉和可放下的东西。像这样的东西对我不好。请参阅我的html： <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="U

像这样的事情。两个包含，右包含是指选择自己喜欢的项目，然后使用鼠标选择一些，然后将右项目放到左包含。这些项目不能超过这两个包含。并且某些样式不会改变，例如边距。对我来说，我首先想用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>


七点一{
宽度：48px；
文本对齐：右对齐；
浮动：左；
右边距：22px；
}
span.selected{
显示：内联；
宽度：306px；
高度：178px；
背景:#fbfb；
浮动：左；
}
博克先生{
浮动：左；显示：内联；
宽度：18px；高度：30px；
利润率：75px 20px自动23px；
}
.七点对{
浮动：左；显示：内联；位置：相对；
}
.7右跨{
右边距：自动；
}
.7对，第二{
宽度：290px；
高度：84px；
左边距：24px；
}
7点对，b点2分{
边缘顶部：12px；
显示：内联块；
字体大小：正常；
}
.7对，第二，标记{
浮动：左；
列表样式：无；
宽度：223px；
边缘顶部：12px；
文本对齐：左对齐；
*利润上限：-20px；
}
.7对，第二，李大哥{
左侧填充：10px；
保证金：0 10px 10px自动；
显示：内联块；
边框：1px纯红；
}
.7右。第二。标记span{
垫顶：2件；
}
.7右。第二。标记李跨度{
宽度：自动；
右边距：自动；
文本对齐：左对齐；
}
诺伊斯特分区{
浮动：左；
边缘顶端：13px；
}


都需要
选择：

html5
css3
jQuery
PHP
蟒蛇
爪哇

不

从右边的容器中拖动项目，然后将其放到左边的容器中，而另一个地方无法提供放置它们的位置。帮帮我，给我一些建议！jQuery对我来说不那么容易

这个代码

在这里通读，你会发现一个很好的例子，带有示例代码和tutoals，在将元素拖动到新的contain之后，contain发生了变化，有没有方法使contain保持不变