How To Stop Elements From Stacking? Jqueryui

I have an example here: http://jsfiddle.net/BAk9N/4/ I'm trying to make it so 'test' elements can not drag on top of other test elements and stack and have not found a working solu

Solution 1:

The one thing I can see is the reason the snapping is acting so funny is the margins between your li's. If you take off the //margin: 10px; from the .meals li css than it snaps to the middle of the element. I would recommend taking that off. Otherwise I feel like you're going to have to come up with your own snapping solution.

Also this is a fiddle I made for a person with another question semi-similar to this. This may help you out in a custom snapping solution.

Demo here: JsFiddle