1

As I was developing an application with jQuery (latest version), my firefox browser decided to update itself to version 6. Right after that, I got the standard jquery ui "sortable" function not working properly. I tried on the jquery website and same thing. Tried with the demo files downloaded with the jquery ui bundle => same result. No hacks, no custo, just vanilla.

Here are the symptoms: starting the sorting (by clicking and dragging the mouse around), the sortable element sticks to the mouse pointer. Fine until there. But when releasing the left mouse button, the sortable element drops on its final position and suddenly, as I move the mouse elsewhere (no mouse buttons clicked) the last sorted element sticks back to the mouse and moves with the pointer.

Clicking somewhere on the page moves the sortable element back to the final dropped position but as soon as I move again the mouse, that element sticks again and does not drop.

Has anyone come over such a bug with firefox 6?

FYI, this sortable function was working like a charm on FF 5.0

Aziz Shaikh
  • 16,245
  • 11
  • 62
  • 79
Nicolas C.
  • 235
  • 4
  • 14

3 Answers3

1

All right guys!! I found the root cause of such a weird behaviour!!! Its name is "FireQuery 1.0" addon for Firefox.

When I saw Guntram telling me that he is using FF6 with the latest version of jQuery + jQuery-UI with no issues at all, I wondered if that could come from an addon. So I disabled everything and re-activated them, one by one, with a restart after each enabling. I found the guilty addon: FireQuery 1.0.

Not saying that this addon is not good but at least, if you ever come with the same issue as mine, at least now you may know the root cause. ;)

Nicolas C.
  • 235
  • 4
  • 14
0

I have the same problem. After a day's worth of testing I have found out what the issue is and what kicks this behaviour off.

Let me first show you what we're using the sortable class on.

-----------
| Header  |
-----------
|         |
|Contents |
-----------

Header is draggable. If you quickly or erratically move the mouse cursor while dragging and the mouse cursor somehow gets moved off the header (e.g. onto the contents), the div sticks to the cursor.

To re-pin the div back onto the page, you can again quickly move the cursor and try to get it back on the header. Then it seems the events are re-attached and you can place the div back on the page.

To sum up, the mouse shifts off the div with the sortable events attached so the object is not seeing the mouseup or click events that place the object back on the page.

Unfortunately, I have no idea how to fix this.

EDIT

We implemented a solution which works for us, but may not be ideal for everyone. Simply .trigger("mouseup") on the draggable element when a click event occurs on any element that should not be dragable. This will snap the draggable element back onto the page.

psx
  • 4,040
  • 6
  • 30
  • 59
0

to me the sorting works alright. the elements dont move unexpectedly.

when i have an item in an element, like a button or a textfield, nothing happens. if i right-click into the field or button the cursor appears (the button is clicked). and when i escape the windows right-click options menu i can type into the text field...

so still strange behaviour. i don't know how it works on ff5, i am on ff6, latest jquery version.

EDIT:

after i found this: http://weblogs.asp.net/jeffwids/archive/2011/01/31/jquery-textbox-in-sortable-is-not-clickable-selectable.aspx i took a closer look at the cancel option provided by the jquery-sortable.

i finally could solve it like this:

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="text" value="text" ></input></li>
    <li class="ui-state-default" style="height: 70px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><textarea cols="20" rows="3">textarea</textarea></li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><button>button</button></li>
</ul>
<script>
        // initialize the sortable including the cancel option
        $( "#sortable" ).sortable({cancel: 'input,button,textarea'});
</script>
Guntram
  • 961
  • 14
  • 19