Question

This is probably going to be a shot in the dark. I made a test page for UI draggable/droppable with a simple html table that worked fine in all browsers. I applied something similar to an ASP.NET page, but it’s not displaying properly in Firefox or Safari. The page is huge, with lots of things going on, and it’s not something practical that I can post. The draggable and droppable areas are tags that are dynamically generated in a Grid View. In Chrome and IE everything works as expect. The function within the drag-and-drop copies the information from the dragged column to the dropped column. This function still works in Firefox and Safari, however when I drag the column headers I cannot see the moving on the screen, it just stays in place (even though in Firebug I can see it’s coordinates changing with my mouse movements).

Here is the code:

dragColumns.draggable({
    revert: true,
    start: function () {
        copyColumnIndex = dragColumns.index(this);
    }
});

Although, without the two options I still can’t see the dragging.

Any ideas?

Answer 1

Here’s the hack I used for this:

firefox = (/firefox/i.test(navigator.userAgent.toLowerCase()));

Now I have a boolean indicator for if were using firefox. (BRUTAL HACK)

Then I add this (BRUTAL HACK 2):

helper: firefox === true ? 'clone' : void 0

That’s one of the options for draggable. Seems like when it clones, it shows up.

If your writing coffeescript, you can do what I did for the helper:

helper: 'clone' if firefox is true

Which looks a little less hackey I suppose…