1

I'm facing the next problem with jQuery sortable (works fine in all major browsers except Firefox)

I have a common ul structure with 4 li items on it. al the list is displaying and working fine, you can drag items (firefox) cool, (I resolved the overflow-y:auto; issue also) the problem begin when you try to drop a draggable item into a new position, in firefox, the "drop zone" do not appear and only you avaible to drag the item, I have research in several post.

jQuery UI sortable scroll helper element offset Firefox issue Firefox 4 Issue with jQuery UI Sortable jquery ui 1.8.16 & firefox 6 - sortable not working properly

But I can't find the solution, I will show you how the problem look like. enter image description here

my css, which I think I have to modify look the following way:

#list-attributes{width:40%; margin:35px 15px 45px 10px; position:relative;  overflow-y:auto;}
#list-attributes li{background:#F7F7F7; padding:20px; color:#666; width:auto; border:1px solid #CCC; position:relative; text-indent:30px; height:25px}
#list-attributes li div.icon{width:25px; height:35px; background:url(../img/search/sprite_search_filters.png) no-repeat; right:0; margin-right:10px; top:18px; position:absolute;}
#list-attributes li div.getinshape{background-position: 0 -297px}
#list-attributes li div.rekindlespiritually{background-position: 0 -357px}
#list-attributes li div.relaxandunwind{background-position: 0 -417px}
#list-attributes li div.gethealthy{background-position: 0 -477px}
#list-attributes li span.msg{ text-indent:28px; line-height:1.8}
#list-attributes li div.handler{color:#666; width:25px; height:25px; background:#00C4D9 url(../../dashboard/frontend/img/drag.png) no-repeat 5px 5px; cursor:move; display:inline-block; position:absolute; top:15px; left:8px}

jquery code:

            $("#list-attributes").sortable({
                update : function () {
                     $('#attributeItems').val($('#list-attributes').sortable('toArray'));
                    //$("#info").load("process-sortable.php?"+order);
                }
            });
Community
  • 1
  • 1
ncubica
  • 8,169
  • 9
  • 54
  • 72
  • Does FF give any JS errors when you move items around? – jimw May 12 '12 at 18:51
  • nothing it's not show any error which is the worse :(, but sortable in the jquery site works fine. This is way I guessing maybe is something with the css file.. – ncubica May 12 '12 at 19:03

1 Answers1

1

Ok this is the answer, and I want to say that this is quite a BIG bug and I don't know why is happening.

in my css file I had at the body element

overflow-y: scroll; overflow-x: hidden;

I just removed it from the body and the sortable start working, BUT also I had to add the overflow:auto into the container (normally ul) tag.

This is so "wtf" bug, but I found it. Hope if somebody face this in the future could resolve it. if you find a better way to do it let me know.

ncubica
  • 8,169
  • 9
  • 54
  • 72