CODEWITHSUNDEEP
javascripthtml
owen gerig
owen gerig

Reputation: 6172

cannot get draggable working

Im trying to implement something very similiar to this

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

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);

        }
    }); });

Upvotes: 0

Views: 119

Answers (2)

owen gerig
owen gerig

Reputation: 6172

There where 2 issues preventing this from working

adding jquery-ui

<script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>

and changing the each to just tr.external-event

$('tr.external-event').each(function() {

Upvotes: 0

nurdyguy
nurdyguy

Reputation: 2945

Well, first off, I don't see an id="external-events" anywhere on the image you provided so I'm not sure where the bind is set to. Did you change the id name at some point during development?

Second, when I've done stuff like this in the past, what I found to be the easiest was to just create a string with the actual html code in it like as follows:

    var html = '<td id="' + theId + '" class="' + theClass + '" >' + someText + '</td>';

Then at the end use jquery .append() or .html() depending on exactly what was happening:

    $('#myTable').append(html);

I don't know if that helps you but I've had a lot of success with that method.

For setting up the draggable events, there are a few options: You can use jQuery's draggable if that is what you need. I've also done it all manually before, using a .on('mousedown'.....) to start the event, then a .on('mousemove', ...) to change the left attribute, and then a .on('mouseup', ...) to end it. This worked much better for me when the dragable was more complex.

Hope this helps.

Upvotes: 1

Related Questions