On drop change class

HTML

<script src="http://code.jquery.com/jquery-1.7.2.js "></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<div class="wrapper">
    <div class="left-column">
        <ul id="sortable1" class="sortable">
            <li class="ui-state-default"><a href=""><img src="https://ssl.gstatic.com/gb/images/i1_3d265689.png" /></a>

            </li>
            <li class="ui-state-default"><a href=""><img src="http://www.natebal.com/images/cartoon-skull.png" /></a>

            </li>
            <li class="ui-state-default"><a href=""><img src="http://www.natebal.com/images/cartoon-skull.png" /></a>

            </li>
            <li class="ui-state-default"><a href=""><img src="https://ssl.gstatic.com/gb/images/i1_3d265689.png" /></a>

            </li>
            <li class="ui-state-default"><a href=""><img src="http://www.natebal.com/images/cartoon-skull.png" /></a>

            </li>
            <li class="ui-state-default"><a href=""><img src="http://www.natebal.com/images/cartoon-skull.png" /></a>

            </li>
            <li class="ui-state-default"><a href=""><img src="http://www.natebal.com/images/cartoon-skull.png" /></a>

            </li>
        </ul>
    </div>
    <div class="right-column">
        <ul id="sortable2" class="sortable">
            <li class="ui-state-highlight" id="music"></li>
            <li class="ui-state-highlight" id="nav"></li>
            <li class="ui-state-highlight" id="climate"></li>
            <li class="ui-state-highlight" id="phone"></li>
            <li class="ui-state-highlight" id="weather"></li>
            <li class="ui-state-highlight" id="email"></li>
            <li class="ui-state-highlight" id="calendar"></li>
        </ul>
    </div>
</div>

CSS

#music li {
    height: 168px !important;
    width: 600px !important;
    background-image: url('img/no-clue-sm.png') !important;
    animation-name: fadeIn !important;
    -webkit-animation-name: fadeIn !important;
    animation-duration: 0.8s !important;
    -webkit-animation-duration: 0.8s !important;
    animation-timing-function: fadeIn !important;
    -webkit-animation-timing-function: fadeIn !important;
    visibility: visible !important;
}
music li {
    height: 168px !important;
    width: 600px !important;
    background-image: url('img/no-clue-sm.png') !important;
    animation-name: fadeIn !important;
    -webkit-animation-name: fadeIn !important;
    animation-duration: 0.8s !important;
    -webkit-animation-duration: 0.8s !important;
    animation-timing-function: fadeIn !important;
    -webkit-animation-timing-function: fadeIn !important;
    visibility: visible !important;
}
.left-column {
    width:60px;
    margin: 0px 0px 0px 5px;
    padding: 0px 0px 0px 0px;
    float: left;
    text-align: center;
    opacity: 0.7;
    overflow: hidden;
}
.right-column {
    width: 615px;
    height: 440px;
    float: left;
    margin: 0px 0px 0px 5px;
    padding: 10px;
    background: #2d2d2d;
    opacity: 0.7;
    overflow: hidden;
}
#sortable {
    list-style-type: none;
    float: left;
    margin: 0px;
    padding: 0px;
}
#sortable1, #sortable2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}
#sortable1 li, #sortable2 li {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 15px 0px;
    width: 50px;
}
#sortable2 li {
    overflow: hidden !important;
    animation-name: fadeIn !important;
    -webkit-animation-name: fadeIn !important;
    animation-duration: 0.8s !important;
    -webkit-animation-duration: 0.8s !important;
    animation-timing-function: ease-in-out !important;
    -webkit-animation-timing-function: ease-in-out !important;
    visibility: visible !important;
}
.ui-draggable, .ui-droppable {
   ...

JavaScript

//Add and remove classes
$('#sortable2 li').droppable({
    drop: function (event, ui) {
        if ($(this).attr('id') == 'music') {
            $(this)
                .attr('class', 'droppedlimusic')
                .removeClass('a:link');
        }
    },
    over: function (event, ui) {},
    out: function (event, ui) {}
});
//End add and remove classes
var lists = [{
    "listid": "#all-colls-list",
        "connectid": "#coll-selected-list"
}, {
    "listid": "#coll-selected-list",
        "connectid": "#all-colls-list"
}];
//Apply Sort on each list
$.each(lists, function (i, list) {
    $(list.listid).sortable({
        connectWith: list.connectid,
        opacity: 0.7,
        start: function (event, ui) {
            if ($(ui.item).parents('#all-colls-list')) {;
                $(ui.item).addClass('dropped');
                //  }
                // else if ($("#music").addClass('droppedlimusic')) {;
                //  $(ui.item).switchClass('sortedli', 'none');
            } else {
                $(ui.item).addClass('sorted');
            }
        },
        stop: function (event, ui) {
            if ($(ui.item).parents('#all-colls-list').length > 0) {
                $(ui.item).switchClass('droppedli', 'sortedli');

            } else {
                $(ui.item).switchClass('sortedli', 'droppedli');
            }
            $(ui.item).removeClass('sorted');
            $(ui.item).removeClass('dropped');
        }
    });
});
//Sortable Section
$(function () {
    $("#sortable1").sortable({
        helper: "clone",
        connectWith: "#sortable2",
        start: function (event, ui) {
            saveMe = $(ui.item).clone();
            startingList = $(ui.item).parent();
            $(ui.item).show();
            saveMe.insertAfter($(ui.item)).hide();
        },
        stop: function (event, ui) {
            if (startingList.attr("id") == $(ui.item).parent().attr("id")) {
                // At this point, we've dropped it on the original...