CODEWITHSUNDEEP
javascriptjqueryjquery-ui
gen_Eric
gen_Eric

Reputation: 227200

jQuery UI Sortable: Cannot add first element to linked element

I have two lists of elements, and I have enabled jQuery UI sortable on both of them. I used the connectWith option to enable me to drag between the two lists.

One list has a lot of elements in it, so I added overflow-y: scroll to it. I used a custom helper function to allow me to scroll the entire page when dragging elements.

helper: function(event, element){
    // From: http://stackoverflow.com/a/8512783/206403
    return element.clone().appendTo('body');
}

If there are no elements in the top list, it's really hard to drag an element into it. If there is already an element in the top list it works fine.

Here's a demo: http://jsfiddle.net/MCcuc/5/. Scroll down, and try to move "Item Q" (from the bottom of the red list), to the green list (try to move the element over the green list, then back out again). You'll see that it's not very easy to get it to attach to the green list.

I think it has something do to with my helper function. How can I get it to let me drag the first element into the green list?

Upvotes: 2

Views: 1079

Answers (4)

peterfoldi
peterfoldi

Reputation: 7471

I am not sure that it helps but what I found is that the "real" problem starts earlier and not at the point when the placeholder disappears. What happens is that the inner scroll-bar doesn't scroll, but in the background the position of your cursor still triggers reordering in the Inactive list. So visually your item is above the Active list, but its position is still above the first 2 elements of the Inactive list. However because of the visual "over" placement the placeholder is already in the Active list. So when the position leaves the "virtual position" of the first item of the Inactive list then the placeholder is removed. Unfortunately by this time it's in the Active list not in the inactive list.

So what I meant by "the problem starts earlier" is that the placeholder should stay in the Inactive list and make it scroll up instead of being moved to the Active list too early, which is probably what you want: first use the scroll-bar of the list then use the scroll-bar of the body. But this implies the requirement of the moving helper item being the child element of the old list when it's above it and become the child of the 'body' when it leaves the old list's area.

I don't think you can do that (with this plugin).

What might be possible: if you don't want to rearrange within the Inactive list but only move items to the Active list with page scroll. In this case what you could do for example is to use the 'out' event and when it's triggered scroll up the Inactive list. Unfortunately seems the 'out' event is not triggered the very first time when it should be. Seems like a bug :(

...
appendTo: 'body',
helper: 'clone',
out: function() {$('#Inactive')[0].scrollTop = 0;},
...

Update: found a workaround. I am not polishing it (special case: when the placeholder is the first item in the list), but this is the idea:

appendTo: 'body',
helper: 'clone',
placeholder: 'addBox',
change: function() {
    $('.addBox').prev()[0].scrollIntoView();
}

Upvotes: 2

Nick Benedict
Nick Benedict

Reputation: 557

How about putting the lists side by side, this eliminates the issue. http://jsfiddle.net/MCcuc/18/

 <table>
      <tr>
       <td><div id="Active" class="sort">
          </div>
      </td>
      <td>
          <div id="Inactive" class="sort">
            <div class="box">
               <div class="handle"></div>
               <span>Item B</span>
            </div>
         </div>
​       </td>
     </tr>
    </table>​​​​​​​​

When the bottom list scrolls down, the overflow is not visible, but is still affecting the space where the top list is. The lower list is not visible, when attempting to drop the Q item, it is still being dropped in the lower list due to the overflow.

Upvotes: 1

Dmitry
Dmitry

Reputation: 1283

Try this: http://jsfiddle.net/KaBB7/

The main idea is - you don't need to connect sortable list with itself, so just initialize you lists separately and connect with each other.

Upvotes: 0

TJ VanToll
TJ VanToll

Reputation: 12704

Frankly I would recommend fundamentally changing your UI to eliminate the need for scroll bars.

There are a LOT of open issues with the sortable plugin related to the presence of scroll bars (see #3173, #5881, #7033, #7065, #7351, #7546, #7581, #7784, and #8039 for a few examples). The dev team isn't putting any priority on these at the moment because the plugin is set for a rewrite in 2.0 (which is a long ways off).

Even if you're able to resolve the current issue you're having (I did try...), I have a feeling that you'll be in for a lot of grief as you go into more thorough cross browser testing. Personally I also feel that having sortable elements with scroll bars is strange from a usability perspective.

Good luck.

Upvotes: 1

Related Questions