Question

首先让我说我对jquery非常新;我上周刚刚完成了代码学院的介绍。欢迎您提出任何建议。

我创建了一个具有无序列表和“工作空间”ul的可折叠div。目标是能够从nav div中的ul中获取项目并将它们放入我工作的工作区中。在我需要帮助的地方，我希望导航面板中的所有项目看起来都是一致的，但是当我将它们放到工作区时，我希望能够指定某些项目具有更大的占用空间。我想我需要一些标记项目的方法，以便当它们到达工作区时我可以对它们应用不同的类。有什么建议吗？

这是我到目前为止所拥有的。

<body>
    <table>
        <tr>
            <td>
                <div class="nav">
                    <ul id="sortable1" class="connectedSortable">
                        <li class="ui-state-default">Item 1</li>
                        <li class="ui-state-default">Item 2</li>
                        <li class="ui-state-default">Item 3</li>
                        <li class="ui-state-default">Item 4</li>
                        <li class="ui-state-default">Item 5</li>
                    </ul>
                </div>

            </td>
            <td>                
                    <div class="pull-me">Slide Up/Down</div>                
            </td>
            <td>
                <ul id="workspace" class="connectedSortable">
                </ul>
            </td>
        </tr>
    </table>
</body>

我的js：

$(document).ready(function () {

    $("#sortable1, #workspace").sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();


    $('.pull-me').click(function () {
        $('.nav').toggle('slide');
    });

});

CSS：

    #sortable1
{
    list-style-type: none;
    margin: 0;
    padding: 0 0 2.5em;
    float: left;
    margin-right: 10px;
}

    #sortable1 li
    {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        width: 120px;
    }

#workspace
{
    border: solid;
    width: 300px;
    height: 300px;
    list-style-type: none;
    margin: 0;
    padding: 0 0 2.5em;
    float: left;
    margin-right: 10px;
}

    #workspace li
    {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        width: 120px;
    }

        #workspace li big
        {
            width:240px;
        }

        #workspace li small
        {
            width:120px;
        }

.nav
{
    float: right;
    background: #ffffbd;
    background-size: 90% 90%;
    height: 300px;
    direction: ltr;
    display: none;
    font-family: garamond,times-new-roman,serif;
}

    .nav n
    {
        text-align: center;
    }

.pull-me
{
    height: 20px;
    font-family: arial,sans-serif;
    font-size: 14px;
    color: #ffffff;
    background: #808080;
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor: pointer;
    text-decoration: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-transform: rotate(-270deg);
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin: bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

    .pull-me p
    {
        text-align: center;
    }

Answer 1

首先，你不能只在这些项目上加一个额外的类，而不是试图通过jQuery在事后添加它吗？ e.g。

<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="treatMeDifferentlyWhenInWorkspace ui-state-default">Item 3</li>
<li class="treatMeDifferentlyWhenInWorkspace ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>

和CSS：

#workspace .treatMeDifferentlyWhenInWorkspace {
    /* ...whatever... */
}

jquery：拖放时更改类

1 个答案: