Question

I’m having two sortable lists where I can add items from the first list to the second list. The default behavior removes the element from the source list, but that’s not what I want (I want it to be copied to the destination list), so I made some adjustments to clone the moved element in the source list before it gets deleted.

It works, but I have weird issues with margins on cloned elements. See for yourself:

This is before:

After some dragging, margin inconsistencies appear:

I have a jsfiddle of the problem here: http://jsfiddle.net/JNbsX/

I’ve tested it on Chrome and Firefox and the issue exists in both browsers. Any help is appreciated. Thanks!

Answer 1

Not entirely sure why it’s happening, but some of your list items are coming out with display: list-item; instead of display: inline-block;, despite your css.

Setting the ul > li to just li seems to fix the issue: http://jsfiddle.net/RichardTowers/rZuRt/