如何使用带有jQuery的id在drop上更改列表项类？

我的css中有7个已定义的图像，我希望能够将其拉入我的阶段，并通过id更改列表项。在左列中有7个按钮，我希望在右列中显示不同大小的不同图像和动画。现在我已经定义了所有的类，但目前只能删除一个类。我正试图写一个if语句来处理这个问题，但是我运气不好。有更好的方法吗？我觉得我很接近

HTML

<div class="wrapper">
    <div id="hide-overflow">
        <ul id="all-colls-list" class="droptrue ui-sortable">
                <li id="music" class="sortedli"><a href="##"><img src="img/icon-music.svg" /></a></li>
                <li id="nav" class="sortedli"><a href="##"><img src="img/icon-nav.svg" /></a></li>
                <li id="climate" class="sortedli"><a href="##"><img src="img/icon-seats.svg" /></a></li>
                <li id="phone" class="sortedli"><a href="##"><img src="img/icon-phone.svg" /></a></li>
                <li id="weather" class="sortedli"><a href="##"><img src="img/icon-weather.svg" /></a></li>
                <li id="email" class="sortedli"><a href="##"><img src="img/icon-email.svg" /></a></li>
                <li id="calendar" class="sortedli"><a href="##"><img src="img/icon-calendar.svg" /></a></li>
        </ul>

        <div id="sortable" class="stage ui-state-highlight">
           <div id="frame">
             <ul id="coll-selected-list" class="droptrue ui-sortable"></ul>
            </div>
        </div>
  </div>

---

真的很难理解你想在这里做什么。也许你可以设置一个JSFIDLE？这是我的JSFIDLE-。这里有一张我正在尝试做的图片-，这是我正在做的JSFIDLE。

<script type="text/javascript">
                var lists = [{
"listid": "#all-colls-list",
"connectid": "#coll-selected-list"
}, {
"listid": "#coll-selected-list",
"connectid": "#all-colls-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').length > 0) {
$(ui.item).addClass('dropped');
} 
else {
$(ui.item).addClass('sorted');
}
},
stop: function(event, ui) {
if ($(ui.item).parents('#all-colls-list').length > 0) {
$(ui.item).switchClass('dropped', 'sortedli');

} else {
$(ui.item).switchClass('sortedli', 'droppedli');

}
}
});
});
</script>

.dropped {
height: 337px;
background-image: url('img/map.png') !important;
}

.droppedclimate{
 height: 104px;
background-image: url('img/climate.png') !important;
}

.droppedweather{
height: 143px;
background-image: url('img/weather.png') !important;
}

.droppedcall{
height: 110px;
background-image: url('img/ongoing-call.png') !important;
}

.droppedmusic{
height: 168px;
background-image: url('img/no-clue-sm.png') !important;
}

.droppedlicalendar{
height: 158px;
background-image: url('img/calendar-sm.png') !important;
}

.droppedemail{
height: 121px;
background-image: url('img/email-sm.png') !important;
}