Droppable Element

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"><strong>1</strong>

            </li>
            <li class="ui-state-default"><strong>2</strong>

            </li>
            <li class="ui-state-default"><strong>3</strong>

            </li>
            <li class="ui-state-default"><strong>4</strong>

            </li>
            <li class="ui-state-default"><strong>5</strong>

            </li>
            <li class="ui-state-default"><strong>6</strong>

            </li>
            <li class="ui-state-default"><strong>7</strong>

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

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').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('droppedli', 'sortedli');
              } else {
                  $(ui.item).switchClass('sortedli', 'droppedli');
              }
              $('#music').droppable({
                  activeClass: 'droppedlimusic'
              });
              $(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 list.
                  //  Remove the clone we made.
                  saveMe.remove();
              } else {
                  // this can be done either here, or in the remove() func.
                  //  I'm thinking this is more intuitive than to re-display
                  //  the item in the remove func.
      ...