Clever Geek Handbook

Make items sorted at different levels and change items

I need to sort some elements of this HTML construct:

<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>

So, I am using JQuery UI. For example, for example:

$(".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'
});

I'm having trouble with this:

  • The .content container contains an editor element, which means the content is editable. Sortable () leads to the problem that I cannot select Text in the editor as the element will be trapped to sort it.
  • This is the main problem: I would like to take the item box_3 from the box_2 container in order to place it in the container box_1. Then it should get the box_2-class / element. Same thing, if I want to put box_3 or box_2 item from section -> it should get box_1 item. Is it possible?

Update:

I solved 1: I put the handler on ".box_delete". Then ".itable" is edited!

Partially solved 2: With connectWith

I can get the box to another level. With the help, stop: function( event, ui ) {}

I can run a function that should check for the parent class to get the new level -> adjust the correct box structure: eg. I put box_2-item in main class -> it should become box_1 item with structure box_1

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

+3


source to share


2 answers


You don't need to change HTML. Just do it like this:

$(".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);
            });
        }
    }
});


This is an example of how the box_2 element will be changed to the actual box_1 element. In this case, the complete structure (!) Will change (not only the class) - as you need. Just do the same for other levels.

+1


source


So, to change the class of an object, you can do something like this:

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

I'm not sure if this is exactly what you want. But I hope this gives you an idea. Updated answer with changes by KevinAlbs.

0


source






More articles:


All Articles