Jquery UI sortable and draggable erratic with floating and scrolling

Posted on 2009-02-22
Last Modified: 2012-05-06
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

Question by:Dave6969
    LVL 5

    Expert Comment

    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
    LVL 5

    Accepted Solution

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

    Author Comment

    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.

    Author Comment

    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


    Author Comment

    This has now been solved since the release of UI 1.7

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question ( on how to make a page show some balloons animate up a page…
    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now