Is there any reason why jQuery Sortable would work in IE/Chrome but not Firefox?

Posted by DNS on Stack Overflow See other posts from Stack Overflow or by DNS
Published on 2011-01-05T19:50:24Z Indexed on 2011/01/05 19:53 UTC
Read the original article Hit count: 215

I have a fairly straightforward list of horizontally floated items, like this:

<div class="my-widget-container">
    <div class="my-widget-column">...</div>
    ...
</div>

Both the container and each column have a fixed width, set using jQuery's .width(). The container is position: relative and the column is float: left and overflow: hidden. Not sure if any other styles/properties are relevant.

When I apply a jQuery-UI sortable to this, the result is exactly what I'd expect in Chome 8 and IE 8; the columns can be dragged around to change their order. But in Firefox 3.6 I can click an item and drag to create a new sort-helper, yet the actual sort never happens; the real item's position in the DOM never changes.

I dug around a little in Sortable, and added a debug print to _intersectsWithPointer. Whenever the drag helper moves, Sortable runs through its list of elements and uses this method to determine whether the drag helper has passed over one. What I saw was that item.left had the same value for all my columns, which is obviously not correct, and probably the source of the problem. It looks like all columns had a left position corresponding to that of the first column.

I'm using jQuery 1.4.3 and jQuery UI Sortable 1.8. Those aren't the very latest versions, but they're pretty recent, and I don't see anything in the Sortable release notes that indicates any such problem has been fixed.

Does anyone know what might be happening here, or have any ideas for further debugging?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery