Javascript 可选jqueryui html标记内容

我已经在一个div上应用了jqueryui

HTML代码：

<div id="selectable">
    <p>xyz xyz xyz xyz xyz xyz xyz xyz xyz xyz xyz <b>ABC </b> <i> 124</i> <span>asdfasdf</span></p>
    <p>xyz xyz xyz xyz xyz xyz xyz xyz xyz xyz xyz <b>ABC </b> <i> 124</i> <span>asdfasdf</span></p>
    <div>xyz xyz xyz xyz xyz xyz xyz xyz xyz xyz xyz <i> 124</i> <span>asdfasdf</span><ul><li>=====</li><li>+++++++</li></ul></div>
</div>

但现在发生的是，当我选择html更改时，意味着p标记、b标记、i标记的顺序会随着拖动功能的发生而改变

任何帮助都将不胜感激

$(function() {
    $("#selectable").click(function (event) {
         $("p, b, i, span, div, ul, li", this)
        .removeClass("selected")
        .filter(event.target)
        .addClass("selected");
    });
});

i、 span和div是一条直线，因此不能分开

.selected{
    color: white;
    background-color: #F39814;
}

.selected{
    color: white;
    background-color: #F39814;
}