Jquery UI sortable and draggable erratic with floating and scrolling

Posted on 2009-02-22
Medium Priority
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
  • 3
  • 2

Expert Comment

ID: 23710533
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

Accepted Solution

prokvk earned 1500 total points
ID: 23710570
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

ID: 23712526
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

ID: 23727898
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

ID: 23979927
This has now been solved since the release of UI 1.7

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses
Course of the Month13 days, 10 hours left to enroll

750 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