Can’t get jQuery sortable to drop on to empty lists?

18 05 2010

Well, I had this little problem today, and I also noticed that there were a lot of other people out there that didn’t understand why it was happening. Which is why I decided I should post the solution.

The jQuery demo on sortable connected lists

The problem of not being able to drag elements in to empty lists, only occurs when the empty list doesn’t have any dimensions… Okay, that sounds confusing. Take my example.

If I have a list, and the list element’s padding and margin have been set to 0px with css – try to view the list element’s area on the screen using a tool like firebug, you’ll notice that it basically isn’t there.

So, technically, the drag and drop between the lists doesn’t work because there’s no longer (or never was if the list is initially empty) any element to drop the new child element IN to.

The solution? Well of course, just add some padding in the css to your UL or OL, and you’ll see that it has some substance regardless of whether it has child list items or not. You’ll then be able to drag in to the empty list perfectly.

Another solution, which might not be as reliable but it’s still good, is to have a min-height css attribute for that list element, so regardless of your lists’s number of list items, it has a certain element height at all times.

Easy peasy. I’ll bet the same solution can be used for Scriptaculous and other scripting technologies.



21 responses

23 09 2010

Thanks, this helped me. The padding works for me.

8 10 2010

SUPER MEGA THANKS!!!! lol i was going crazy trying to find out why it didn’t worked for me hahaha

8 10 2010

haha, yeah, its bloody annoying isn’t it! such a sneaky little problem that one. : D Glad I’ve helped at least a couple of people πŸ˜€ Good stuff!

7 01 2011

Thanks. This saved my day bigtime. Been trying to solve the
problem for hours. πŸ™‚

7 01 2011

No worries! Glad it saved your day! I knew i wouldn’t be the only one who had probs with the padding issue. Heh πŸ™‚

13 10 2011

Cheers for this Rolley…lead me to my addition to the solution:

If you assign a css class on click you can create a kind of pop up “landing pad” for quite nicely πŸ˜€

14 10 2011

Filth! I like the popup landing pad, that’s a cool idea : D Thanks Woody

14 10 2011

All good dude πŸ˜€

8 06 2012
Kijana Woodard

Thanks πŸ™‚

3 07 2012

Thanks for this. Love when Google brings me to a solution that quickly, especially when it’s a really easy fix.

3 07 2012

haha great! thanks! I’m glad people still find it and find it helpful! πŸ˜€

20 02 2013

Thanks. It worked for me. I was stuck with this problem for the last couple of hours.

1 01 2014
Unable to Drop on an Empty List |

[…] Rollys WordPress […]

10 07 2014
Ideal Bakija

Thanks a Lot man. This really solved a problem I had for a long time now!

10 10 2014

Thanks a lot it worked for me πŸ™‚

10 03 2015

You’re still helping people with this post. Thank you!

11 03 2015

haha thanks Mark, that’s great, I actually would have thought JQuery would have fixed it by now, I’m so glad people still find this useful even though I’ve since totally abandoned my work-blog HAHA .. Awesome πŸ™‚

17 03 2015
in lala land

thank you very much this helps a lot!

26 05 2015


12 02 2016

Thank you so much.

25 03 2016


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: