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'
});

我遇到了一些问题：

.content-container包含一个编辑元素，表示内容是可编辑的。 Sortable（）导致问题，我无法在编辑器中选择Text，因为将捕获元素以对其进行排序。
这是主要问题：我想从box_2容器中取出一个box_3元素，将其放入box_1容器中。然后它应该得到一个box_2类/元素。如果我想将box_3或box_2元素放在该部分之外，那同样的事情 - ＆gt;它应该得到一个box_1元素。这可能吗？

更新：

我解决了1：我把处理程序放在“.box_delete”上。然后“.editable”是可编辑的！

部分解决2：使用connectWith我可以将一个方框放到另一个级别。使用stop: function( event, ui ) {}我可以启动一个函数，该函数应检查父类以获得新级别 - ＆gt;调整到正确的盒子结构：例如我把一个box_2元素放到了主类 - ＆gt;它应该成为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元素的示例。有了这个，完整的结构（！）将会改变（不仅仅是课程） - 你需要它。对其他级别做同样的事情。

Answer 2

好的，要更改对象的类，你可以这样做：

JSFiddle

<强> HTML：

<div class="main">
    <section class="box_1 connected">
        <div class="box_delete"></div>
        <header class="trigger">
             <h2 contenteditable="true">TITLE</h2>

        </header>
        <div class="content level1">
            <div class="editable">
                <p>Level1</p>
            </div>
            <div class="box_2 connected">
                <div class="box_delete"></div>
                <div class="box_rand"></div>
                <div class="content level2">
                    <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>

<强> JAVASCRIPT：

$(".main").sortable({
    opacity: 0.5,
    helper: 'clone',
    items: '.box_1',
    connectWith: '.connected'
});
$(".box_1").sortable({
    opacity: 0.5,
    items: '.box_2',
    helper: 'clone',
    connectWith: '.connected',
    stop: stopfunction
});
$(".box_2").sortable({
    opacity: 0.5,
    items: '.box_3',
    helper: 'clone',
    connectWith: '.connected',
    stop: stopfunction
});

function stopfunction(e, ui){
    var item = ui.item;
    if(item.parent().hasClass('level1')) {
        removeBoxClasses(item);
        item.addClass('box_2');
    }
    else if(item.parent().hasClass('level2')) {
        removeBoxClasses(item);
        item.addClass('box_3');
    }
}

function removeBoxClasses(elem){
    elem.removeClass('box_1').removeClass('box_2').removeClass('box_3');
}

我不确定这正是你想要的。但我希望它会给你一个想法。更新了KevinAlbs更改的答案。

使元素可以通过不同级别进行排序并更改元素

2 个答案: