可选择jqueryui重新排序html标记内容

Selectable jqueryui rerordering html tag content

本文关键字：html 排序 jqueryui 新排序 可选择      更新时间：2023-09-26

我已经在div上应用了jquery ui可选

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>

jQuery/Javascript代码：

$('#selectable').selectable();

但实际情况是，当我选择时，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;
}
相关文章：