Jquery UI sortable and draggable erratic with floating and scrolling

Hi Experts.

I've got a bit of an involved interface going on with managing lists. I am using facebox as a popup (and I have made it draggable as wellI). Within the facebox popup I have a form at the top which loads dynamically and a DIV at the bottom which shows the items entered by the form, also loading dynamically. I've made the list in the bottom DIV sortable using Jquery UI (with the help of livequery... took me a while to work that one out!). The DIV containing this list is set to overflow:auto, depending on how long the list gets.

HOWEVER, as you will see from the snippet below, to make the interface meaningful I have put the text in the list with images. I've made the text div float (I have also been using span, although had to make it display:block before it would take a width) to create a table-like effect. This works OK in Firefox, but in IE when you drag an item it whizzes off to the right. When I remove the floats it works great but looks awful as nothing lines up. I'm guessing this is because my floats are confusing the animated floats when I move it (only a guess!)

Now. I said it works OK in Firefox, but I was lying, because while the dragging around works OK, the list doesn't shift  up and down to allow the moved list item to be put in its new position. The item just returns to whence it came when I release the mouse button.

On top of that I have an additional problem in Firefox. Making the the facebox draggable has seemed to break any scrolling menu within it. Grabbing a scrollbar within it on a select or, here, on a DIV with overflow:scroll just drags the entire box. I don't have this problem in IE, though, only the other ones!

I'm using Jquery 1.3.1 and UI 1.5.3. I tried 1.6rc6, but *everything* broke... no dragging, no sorting, nothing.

500 points as ever... :-)
#listdisplay {overflow-y: auto; border-top: 1px solid #000088;border-bottom: 1px solid #000088; padding: 5px 0 5px 0; height: 150px}
 .listitem_title  {display: blocklfloat:left; width: 150px;}
 .listitem_buttons  {display: block; float: left}
		$(this).sortable({placeholder: 'ui-state-highlight',forcePlaceholderSize: true});
<div id="listdisplay">
<ul id="sortable_list">
<li class="sortable_listitem"><div class="listitem_title">Item title</div>
    <div class="listitem_buttons">
    <img src="images/button_list_edit.gif" border="0">
    <img src="images/button_list_delete.gif" border="0">
    <img src="images/button_list_link_inactive.gif" border="0">
    <img src="images/button_list_text_overlay_inactive.gif" border="0">
    <img src="images/button_list_image_inactive.gif" border="0">
    <img src="images/button_list_move.gif" border="0" class="handle">
    <input type="hidden" name="listreorder" id="listreorder" value="1">

Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Don't use combination jQuery v1.3.1 with jQuery UI v1.5.3, compatible pairs are:

jQuery v1.2.6 + jQuery UI v1.5.3

jQuery v1.3.1 + jQuery UI v1.6.x
Oh .. And I would recommend the first mentioned combination, since jQuery UI v1.6.x is just a release candidate, not final and stable

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave6969Author Commented:
Oh damn... I was using JQ1.3.1 because the sliding is so much smoother.

Oh well, thanks I'll give it a go and get back to you.
Dave6969Author Commented:
Well.. I changed the script to 1.2.6 and now great big sections of it are broken.

I'm using a tabbing script in the facebox (see the code snippet. And with 1.2.6 this completely breaks. But when I change back to 1.3.1 (and change nothing else) it works just as intended.

Sorry for the delay in responding, but I've been removing portions of the script one at a time and seeing which doesn't work, but I've drawn a complete blank. While I've included that tab snippet that definitely doesn't work, I'm not sure that it's the cause.

What's going on?
    $('#facebox_inner_navigation a').click(function () {
        $('#facebox_inner_navigation a').removeClass('selected');
        return false;

Open in new window

Dave6969Author Commented:
This has now been solved since the release of UI 1.7
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.