Im trying to implement something very similiar to [this](http://jsfiddle.net/wkKfB/15/)

However I am using a `table` (`dataTable()`) instead of the `div` they are using.

Its seems though that the method which packs the data into the object being passed to the `drop` container/callback cannot find any of my `external-event` classes

So that in my `drop` callback I end up with an `undefined` `eventObject`

```
function populateWorkOrders(){

var workOrdersTableBody = document.getElementById("workOrdersTableBody");//Link to the containing element using getElementById or similar

for (i=0;i<workOrders.length;i++) { //Loops for the length of the list

    var tr=document.createElement('tr'); //Creates <ul> element
    tr.setAttribute("class","external-event");
    tr.setAttribute("draggable","true");

    var workOrderId=document.createElement('td'); //Chrome seems not to like the variable "name" in this instance
    workOrderId.innerHTML=workOrders[i].workOrderId; //Adds name
    tr.appendChild(workOrderId);

    var workOrderTitle=document.createElement('td');
    workOrderTitle.innerHTML=workOrders[i].workOrderTitle;
    tr.appendChild(workOrderTitle);

    var workOrderAccount=document.createElement('td');
    workOrderAccount.innerHTML=workOrders[i].workOrderAccount;
    tr.appendChild(workOrderAccount);

    var workOrderPriority=document.createElement('td');
    workOrderPriority.innerHTML=workOrders[i].workOrderPriority;
    tr.appendChild(workOrderPriority);

    workOrdersTableBody.appendChild(tr);
}
  //THIS IS WHATS NOT RUNNING AND IT SEEMS THAT IT CANT FIND ANYTHING
$('#external-events tr.external-event').each(function() {

        var eventObject = {
            title: "fulltitle"//$.trim($(this).data) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });

$('#workOrdersTable').dataTable();

```

} 

This ends up producing this
[![enter image description here](https://i.stack.imgur.com/kG5Mw.png)](https://i.stack.imgur.com/kG5Mw.png)

It seems to append "odd" and "even" to the class name. To get rid of that I can surround (under the table) everything in a `div` tag but then that breaks `DataTables()` and still doesnt fix the issue .

Here is the html:

```
    <title>TITLE</title>
    <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/indexJs.js"></script>
</head>
<body>
    <div>
        <!--had to load this separate from full calender lib else there were conflicts-->
        <script type="text/javascript" src="js/libs/datatables/media/js/jquery.dataTables.js"></script>
        <table class="display" id="workOrdersTable">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Account</th>
                    <th>Priority</th>
                </tr>
            </thead>
            <tbody id="workOrdersTableBody">
            </tbody>
        </table>
    </div>
    <script>
        populateWorkOrders();
    </script>
    <br>
    <div>
        <select id="technicianServiceTeamSelectorDropDown"  style="width:25%"  onchange="populateTechnicians();"></select>
        <br>
        <select id="technicianSelectorDropDown" style="display:none; width:25%" onchange="populateCalendar()"></select>
        <script>
                populateTechniciansServiceTeams();
        </script>
    </div>
    <br>
    <div id='calendar'>
        <!--had to load this separate from data tables lib else there were conflicts-->
        <script type="text/javascript" src='js/libs/fullcalendar/lib/jquery.min.js'></script>
        <script type="text/javascript" src='js/libs/fullcalendar/lib/moment.min.js'></script>
        <script type="text/javascript" src='js/libs/fullcalendar/fullcalendar.js'></script>
    </div>
</body>

```

So the above shows the draggable elements. Here is the code for the drop.

```
$(document).ready(function() {
$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: false,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');
            console.log(originalEventObject);
            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            //copiedEventObject.title = "h";
            copiedEventObject.start = date;
            copiedEventObject.allDay = true;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        }
    }); });

```