Currently I have a sortable card container where the user can drag the cards and place them in any position they want to. I am using jquery.ui.widget.js library to do this. The following is the code in my AJAX to achieve this.

$('.sortable').sortable({
            cursor: 'move',
            start: function(event, ui) {
                ui.item.addClass('grabbing moving').removeClass('col-sm-6');
                ui.placeholder
                    .addClass('starting')
                    .removeClass('moving')
                    .css({
                        top: ui.originalPosition.top,
                        left: ui.originalPosition.left
                    });
            },
            change: function(event, ui) {
                ui.placeholder.removeClass('starting');
            },
            update: function(event, ui) {
                $.ajax({
                    url: '<?php echo site_url('listings/sortlisimages/' . $this->uri->segment(3)); ?>',
                    type: 'POST',
                    dataType: "json",
                    data: $(this).sortable('serialize'),
                    success: function(data) {}
                });
            },
            beforeStop: function(event, ui) {
                ui.placeholder.after(ui.item);
            }
        });

Now this is working in all the browsers I tested with except for FireFox. I'm basically trying this out: https://jqueryui.com/sortable/ and this example works in firefox for their official website so it's not a compatibality issue, yet for mine it does not work on firefox, not sure why. Also there are no errors in my console.