Sortable items and subitems in list on jQuery ui sortable

Question

If you drag any child element beyond any parent, its position is stored . This is a helluva lot . Element must go back to the previous parent. Child elements must be able to move within the parent and the parents . Parent elements must be able to move between them.

problems:

1. How to disable drag child elements abroad parents?
2. How to enable parents to drag right? Now , if the example of the first parent to drag down to the place PARENT # 2 or PARENT # 3 , it will not move

Code:

<script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery-ui/1.9.2/jquery-ui.min.js"></script>

<script>
    $(document).ready(function(){
            var sortable_element = $('.sortable');

            sortable_element.sortable(
            {
                items: ".group-caption, .group-caption .group-item",
                handle: ".move",
                cursor: "move",
                opacity: 0.7,
                containment: ".sortable",
                placeholder: "movable-placeholder",
                revert: 300,
                delay: 150,
                start: function(e, ui )
                {
                    ui.placeholder.height(ui.helper.outerHeight());
                }
            });
        })
    </script>


    <style>
        .sortable {

        }
        .group-caption {
            background: #D3CAAF;
            width: 400px;
            display: block;
            padding: 20px;
            margin: 0 0 15px 0;
        }
        .group-item {
            background: #5E5E5E;
            width: 300px;
            height: 30px;
            display: block;
            padding: 3px;
            margin: 5px;
            color: #fff;
        }
        .move {
            background: #ff0000;
            width: 30px;
            height: 30px;
            float: right;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            line-height: 30px;
            font-family: Arial;
            cursor: move;
        }
    </style>



    <div class="sortable">
        <div class="group-caption">
            <h4>PARENT #1</h4>
            <div class="move">+</div>
            <div class="group-items">
                <div class="group-item">CHILD #1<div class="move">+</div></div>
                <div class="group-item">CHILD #2<div class="move">+</div></div>
                <div class="group-item">CHILD #3<div class="move">+</div></div>
                <div class="group-item">CHILD #4<div class="move">+</div></div>
                <div class="group-item">CHILD #5<div class="move">+</div></div>
                <div class="group-item">CHILD #6<div class="move">+</div></div>
                <div class="group-item">CHILD #7<div class="move">+</div></div>
                <div class="group-item">CHILD #8<div class="move">+</div></div>
                <div class="group-item">CHILD #9<div class="move">+</div></div>
                <div class="group-item">CHILD #10<div class="move">+</div></div>
                <div class="group-item">CHILD #11<div class="move">+</div></div>
                <div class="group-item">CHILD #12<div class="move">+</div></div>
                <div class="group-item">CHILD #13<div class="move">+</div></div>
                <div class="group-item">CHILD #14<div class="move">+</div></div>
                <div class="group-item">CHILD #15<div class="move">+</div></div>
                <div class="group-item">CHILD #16<div class="move">+</div></div>
            </div>
        </div>
        <div class="group-caption">
            <h4>PARENT #2</h4>
            <div class="move">+</div>
            <div class="group-items">
                <div class="group-item">CHILD #1<div class="move">+</div></div>
                <div class="group-item">CHILD #2<div class="move">+</div></div>
                <div class="group-item">CHILD #3<div class="move">+</div></div>
                <div class="group-item">CHILD #4<div class="move">+</div></div>
            </div>
        </div>
        <div class="group-caption">
            <h4>PARENT #3</h4>
            <div class="move">+</div>
            <div class="group-items">
                <div class="group-item">CHILD #1<div class="move">+</div></div>
                <div class="group-item">CHILD #2<div class="move">+</div></div>
                <div class="group-item">CHILD #3<div class="move">+</div></div>
                <div class="group-item">CHILD #4<div class="move">+</div></div>
                <div class="group-item">CHILD #5<div class="move">+</div></div>
                <div class="group-item">CHILD #6<div class="move">+</div></div>
                <div class="group-item">CHILD #7<div class="move">+</div></div>
                <div class="group-item">CHILD #8<div class="move">+</div></div>
            </div>
        </div>
    </div>

Answer 1

If I understand you correctly you need two sortables - one for the parents and one for the children and then the children should connectWith the parents and you need a tolerance property.

// Sort the parents
$(".sortable").sortable({
    containment: "parent",
    items: "> div",
    handle: ".move",
    tolerance: "pointer",
    cursor: "move",
    opacity: 0.7,
    revert: 300,
    delay: 150,
    dropOnEmpty: true,
    placeholder: "movable-placeholder",
    start: function(e, ui) {
        ui.placeholder.height(ui.helper.outerHeight());
    }
};

// Sort the children
$(".group-items").sortable({
    containment: "parent",
    items: "> div",
    tolerance: "pointer",
    connectWith: '.group-items'
});

See my Fiddle demo.

--- UPDATE #1 ---

Updated Fiddle demo 2 to only allow children to bind to its parent.

--- UPDATE #2 ---

Updated Fiddle demo 3 to have a placeholder on each child element and allow to drag to empty parent. The empty parent just needed a min-height CSS.