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.
Thanks, this helped me. The padding works for me.
SUPER MEGA THANKS!!!! lol i was going crazy trying to find out why it didn’t worked for me hahaha
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!
Thanks. This saved my day bigtime. Been trying to solve the
problem for hours. π
No worries! Glad it saved your day! I knew i wouldn’t be the only one who had probs with the padding issue. Heh π
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 π
Filth! I like the popup landing pad, that’s a cool idea : D Thanks Woody
All good dude π
Thanks π
Thanks for this. Love when Google brings me to a solution that quickly, especially when it’s a really easy fix.
haha great! thanks! I’m glad people still find it and find it helpful! π
Thanks. It worked for me. I was stuck with this problem for the last couple of hours.
[…] Rollys WordPress […]
Thanks a Lot man. This really solved a problem I had for a long time now!
Thanks a lot it worked for me π
You’re still helping people with this post. Thank you!
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 π
thank you very much this helps a lot!
Worked
Thank you so much.
Worked