CODEWITHSUNDEEP
jquerycss
JDH
JDH

Reputation: 2812

jquery: change class on drag and drop

First let me say I am extremely new to jquery; I just completed the code academy intro last week. Any suggestions you have are welcome.

I have created a collapsible div with an unordered list, and a "workspace" ul. The goal is to be able to take items from the ul in the nav div and drop them into the workspace which I have working. Where I need some help is I would like the items in the nav panel to all look dimensionally uniform, but when I drop them on to the workspace I want to be able to specify that some of the items will have a larger footprint. I am thinking I need some way of tagging the items so that when they hit the workspace I can apply a different class to them. Any suggestions?

Here's what I have so far.

<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>

My 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;
    }

Upvotes: 3

Views: 292

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21475

Can't you just include an extra class on those items in the first place, rather than trying to add it after the fact via 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>

and CSS:

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

Upvotes: 2

Related Questions