0

诸如此类的事情。两个包含，右边的包含会选择自己喜欢的项目，然后用鼠标选择一些，把右边的项目放在左边的包含。那些项目不能超出这两个包含。有些样式不会改变，就像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 对我来说并不那么容易。

这个http://jsfiddle.net/Jackyhua/FgtrW/的代码

4

0 回答 0