sortable with <span> causes target placeholder to misbehave

sortable with <span> causes target placeholder to misbehave

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>


<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI setList - Connect lists</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    
    <style>
#masterList, .sortList { list-style-type: none; margin: 5px,1px,1px,1px; padding: 1px;  width: 25em; float: left;}
#masterList li, .sortList li { margin: 0 1px 1px 2px; padding: 2px; font-size: .75em; height: 1.2em;  width: 25em; }
.setLabel {font-size:1em; font-weight:bold; color:#1C94C4; padding-left:.5em; padding-right:.5em; }
.ui-state-highlight { height: 1.2em; line-height: 1em; }
    </style>
    <script>
    $(function() {
$( "#setList1, #setList2" ).sortable({
placeholder: "ui-state-highlight",
connectWith: "ul",
cursor:  "move"
}).disableSelection();
$( "#masterList" ).sortable({
placeholder: "ui-state-highlight",
connectWith: "ul",
cursor:  "move"
}).disableSelection();
    });
    </script>
</head>
<body>
 
<div id='listDiv'  style='float:left; margin-top:1em; margin-left:3px; margin-right:15px; width:30%;'> 
<ul id="masterList" class="connectedsetList">This works
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>

<div id='setsDiv' style='float:left;'> 
<ul id="setList1" class="connectedsetList sortList"> This works</ul>
<ul id="setList2" class="connectedsetList sortList"><span class='setLabel'> This doesn't work</span></ul>
</div>
</body>
</html>