Sortable with templates

Sortable with templates

Hello,

I'm trying to make a schedule-management page using sortables. The schedule is a set of columns, one for each day of the week, that contains a list of shows represented by icons.

I have it so you can rearrange the shows, but right now you can't create new shows. I want to have a set of template icons that you can drag onto the schedule to create new shows.

This is what I have so far (simplified):

<div class="templates">
  <!-- some icons -->
</div>

<table>
  <tr>
    <td class="sortable">
      <!-- some icons -->
    </td>
    <td class="sortable">
      <!-- some icons -->
    </td>
    <!-- more table cells with icons -->
</table>

<script type="text/javascript">
$(document).ready(function(){
  $(".sortable").sortable({
    connectWith: [".sortable"],
    update: function(e, ui) {
      /* some ajax that updates the schedule */
    }
  });
  $(".templates").sortable({
    connectWith: [".sortable"]
  });
});
</script>


The thing is, I don't want the template icons to be sortable. That is, they shouldn't sort with each other and they shouldn't get removed from the templates when I drag them onto the schedule. But I don't think I can use "draggable" because then they won't push around the icons in the schedule when I drag them there. So I have two questions:

1) How do I make the template icons sortable when dragged onto the schedule but not sortable with each other?

2) How do I prevent the template icons from being removed from the templates when I drag them onto the schedule?