Sortable Table with Draggable

by TheFiddler

HTML

<a id="addNewCo" href="#sph-cos-blank">Add Callout</a>
<table cellpadding="0" cellspacing="0" border="1" class="sph-portlet-table">
  <tr>
    <th>Available</th>
    <th>Home</th>
    <th>Pulling It Together</th>
    <th>Online Class</th>
    <th>Responsibilities</th>
    <th>Contact Us</th>
  </tr>
  <tr>
    <td>
        <ul class="sph-callout-portlet" id="sph-callout-portlet-avail">
            <li>This is a test</li>
            <li>Paid Internship Opportunity</li>
            <li>Opportunities of the Week</li>
            <li>Public Health Organizations</li>
            <li>Events</li>
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet target" id="sph-callout-portlet1" style="">
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet target" id="sph-callout-portlet2" style="">
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet target" id="sph-callout-portlet3" style="">
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet target" id="sph-callout-portlet4" style="">
        </ul>
    </td>
    <td>
        <ul class="sph-callout-portlet target" id="sph-callout-portlet5" style="">
        </ul>
    </td>
  </tr>
</table>

CSS

.sph-portlet-table{width:100%}
.sph-portlet-table th{background:#555;padding:5px;border-left:1px solid #fff;color:#fff;width:87px}
.sph-portlet-table td{background:#eee;border-left:1px solid #fff;vertical-align:top}
.sph-callout-portlet,.sph-callout-portlet-avail {float: left;width:90%;margin:10px 0 !important;min-height:300px}
.sph-callout-portlet li{}
.sph-callout-portlet li,.sph-callout-portlet-avail li {display:block;list-style-type: none !important;cursor:move;margin:3px !important;padding:3px 5px !important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#555;color:#fff;width:80px;position:relative}
.sph-portlet-table .ui-state-highlight{height:14px}

JavaScript

var draggable_opts = {
            connectToSortable: ".sph-callout-portlet",
            helper: "clone",
            opacity: 0.75,
            revert: 'invalid',
            stop: function(event, ui) {
                //alert(ui)
            }
        };

$(function() {
    $( ".sph-callout-portlet" ).sortable({
        opacity: 0.75,
        placeholder: "ui-state-highlight",
    }).disableSelection();

    $( "#sph-callout-portlet-avail li" ).draggable(draggable_opts);
        
    $(document).on("click",'#addNewCo',function(e){
        e.preventDefault();
        var newCo = $('<li>New Callout</li>').draggable(draggable_opts);
        $('#sph-callout-portlet-avail').append(newCo);
    });
});