jquery - 使元素可按不同级别排序并更改元素

Question

我需要对此 HTML 构造的一些元素进行排序:

<div class="main">
<section class="box_1">
    <div class="box_delete"></div>
    <header class="trigger"><h2 contenteditable="true">TITLE</h2></header>
    <div class="content">
        <div class="editable">
            <p>Level1</p>
        </div>
        <div class="box_2">
            <div class="box_delete"></div>
            <div class="box_rand"></div>
            <div class="content">
                <div class="editable">
                    <p>Level2</p>
                </div>
                <div class="box_3">
                    <div class="box_delete"></div>
                    <div class="content">
                        <div class="editable">
                            <p>Level3-1</p>
                        </div>
                    </div>
                </div>
                <div class="box_3">
                    <div class="box_delete"></div>
                    <div class="content">
                        <div class="editable">
                            <p>Level3-2</p>
                        </div>
                    </div>
                </div>                  
            </div>
        </div>
    </div>
</section>
</div>

所以我正在使用 JQuery UI。例如这样:

$(".main").sortable({
    opacity: 0.5,
    items: '.box_1'
});
$(".box_1").sortable({
    opacity: 0.5,
    items: '.box_2'
});
$(".box_2").sortable({
    opacity: 0.5,
    items: '.box_3'
});

我遇到了一些问题:

1. .content-container 包含一个编辑器元素，这意味着内容是可编辑的。 Sortable() 导致问题，我无法在编辑器中选择文本，因为元素将被捕获以对其进行排序。
2. 这是主要问题:我想从 box_2 容器中取出 box_3 元素并将其放入 box_1 容器中。然后它应该得到一个 box_2-class/element。同样的事情，如果我想将 box_3 或 box_2 元素放在该部分之外 -> 它应该得到一个 box_1 元素。这可能吗？

更新:

我解决了1:我将处理程序放在“.box_delete”上。那么“.editable”就是可编辑的!

部分解决2.:使用connectWith我可以把盒子提升到另一个层次。与stop: function( event, ui ) {}我可以启动一个函数，该函数应该检查父类以获得新级别 --> 调整到正确的盒子结构:例如我将一个 box_2 元素放入主类 --> 它应该成为具有 box_1 结构的 box_1 元素

JSFIDDLE: http://jsfiddle.net/xssLmrvb/4/

Answer 1

您不必更改 HTML。只需这样做:

$(".box_1").sortable({
    opacity: 0.5,
    items: '.box_2',
    handle: '.box_delete',
    placeholder: "ui-state-highlight",
    connectWith: ".main",
    stop: function( event, ui ) {
        var box = ui.item;
        if(box.parent().attr('class')=="main") {
            var content = $(box).find(".content").html();
            var box_delete = '<div class="box_delete"></div>';
            var header_trigger = '<header class="trigger"><h2>TITLE</h2></header>';
            var box_content = '<div class="content">'+content+'</div>';

            $(box).replaceWith(function () {
                return $('<section class="box_1 ui-sortable"></div>')
                        .append(box_delete)
                        .append(header_trigger)
                        .append(box_content);
            });
        }
    }
});

这是一个如何将 box_2 元素更改为真正的 box_1 元素的示例。这样，完整的结构(!)将根据您的需要而改变(不仅仅是类)。对其他级别做同样的事情。