I made some <ul>'s and made them sortable in the usual way. I gave them a common class and connected them so I could move items between the lists.
I wanted to put a label on the lists (e.g. list 1 , list 2, etc.)
I did that by typing text after the opening <ul> tag, and it worked fine.
Then I wanted to style the labels, so I put them in a <span> tag and gave the span a class so I could style them all the same.
That breaks the way the sortable objects work: a target only opens on the fist or last element, and you can't sort the list items anymore. The new placeholder <li> is only created at the top or bottom of the list.
Removing the <span> fixed the issue, but it would be nice to have a good way to label the lists, and style the label.
My workaround was to put the list in a div, set some css on the text of the div, and that passed through to the label I typed in the <ul>.
Took me quite a while to figure out that was the issue, so maybe this will save someone else some headaches.... Here's a demo of the problem. Note that you can't sort items in the list that contains a <span>