fullcalendar events drag and drop not working in firefox

Question

The drag and drop works fine on other browsers just firefox that has an issue.

I have read enough to know that Firefox has a different mechanism for drag and drop but nothing I found has helped Tried implementing jsEvent.preventDefault(); as the commentor suggest here but that did not change the behavior and Im not sure how to implement the marked as answer portion which does event.originalEvent.dataTransfer.setData('text/plain', 'anything');

Here is my drag and drop code:

setup draggable tr

$('#workOrdersTable tbody tr').each(function() {
    var tds = $(this).children('td');
    if (tds.length > 0) {
        var workOrder = $.grep(workOrders, function(e) {
            return e.woNumber == tds[0].innerText;
        })[0];
        if (typeof workOrder !== "undefined" || workOrder !== null) { // store the Event Object in the DOM element so we can get to it later
            $(this).data('workOrder', workOrder);
            // 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
            });
        }

    }
});

How can I get this working in Firefox?

FullCalendar setup implementing drop

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: false,
    droppable: true,

    //edit existing
    eventClick: function(calEvent, jsEvent, view) {
        populateEvent(calEvent, true);
    },

    //create new
    drop: function(date, jsEvent, ui ) {
        //alert('jsEvent '+jsEvent);
        jsEvent.preventDefault();

        var workOrder = $(this).data('workOrder');
        workOrder.title = workOrder.woNumber + ' ' + workOrder.account
        workOrder.description = workOrder.problemDescription;
        workOrder.start = date;
        workOrder.end = moment(date).add(1, 'hour'); //change default so the start and end dont match
        populateEvent(workOrder, false);
    },

I also use Firefox and don't have problems with Drag&Drop. I'm just shooting in the dark, but do you also have issues with this d&d?: http://jsfiddle.net/VjNFn/16/ — Slyvain, Sep 18 '15 at 13:33

score 0 · Accepted Answer · answered Sep 18 '15 at 14:12

The issue was with setting the data onto the draggable row

var workOrder = $.grep(workOrders, function(e) {
        return e.woNumber == tds[0].innerText;
    })[0];

needed to be

        var woNumberTemp = tds[0].textContent || tds[0].innerText;
        var workOrder = $.grep(workOrders, function(e) {
            return e.woNumber == woNumberTemp;
        })[0];

Appearently for chrome tds[0].innerText is fine but firefox needs tds[0].textContent

fullcalendar events drag and drop not working in firefox

1 Answers1