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.

About these ads

Actions

Information

14 responses

23 09 2010
Ershadul

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

8 10 2010
P48l0

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

8 10 2010
Rolley

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 :D Good stuff!

7 01 2011
Jaypee

Thanks. This saved my day bigtime. Been trying to solve the
problem for hours. :)

7 01 2011
Rolley

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
Woody

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

http://blog.woodylabs.com/2011/10/unable-to-drop-jquery-sortable-onto-empty-list-hack-solution/

If you assign a css class on click you can create a kind of pop up “landing pad” for it..works quite nicely :D

14 10 2011
Rolley

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

14 10 2011
Woody

All good dude :D

8 06 2012
Kijana Woodard

Thanks :-)

3 07 2012
Ryan

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

3 07 2012
Rolley

haha great! thanks! I’m glad people still find it and find it helpful! :D

20 02 2013
Vani

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 | StackAnswer.com

[…] Rollys WordPress […]

10 07 2014
Ideal Bakija

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s




Follow

Get every new post delivered to your Inbox.

%d bloggers like this: