A: 

I think I can tell you what your problem is, but not necessarily how to fix it:

You are trying to drag DIVs from the left, and snap them into LIs on the right, but you have tried to connected a collection of divs to an order list of list items that have DIVs in them. This won't work. You need to connect two collections of like items, such as an ordered list to another list.

I opened up firebug and increased the padding on your LIs like this:

$('#right_col > li').css({padding: '15px'});

Then I tried to sort the LIs by dragging one around the right area, and it sorted like I expected it to, but the DIV, that seemed like it was in it, stayed in place, confirming my suspicion that these collections are not linked properly. Why not just have an ordered list on both sides, then it will be easy?

Josh Pearce
I think you may have misunderstood my problem. I want the list on the right to ONLY be sortable with elements that are already in it, and new elements will be placed on top of empty boxes that are then sortable. I have had two connected sortable lists working already, but that doesn't solve the problem.
Devon P