Sortable jquery ui if the selector has been removed and filled, the event handler is lost

Question

If you press the button, the value of the selector will be entered into the variable selector itself will be cleaned, and then filled. Problem: Cleaning up selector CHILD # 1-CHILD # 6 dragged, after cleaning they are not dragged. How to make and after cleaning they can be dragged selector (keeping previous settings sortable)?

It's my example 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(){

        // 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: "document",
            items: "> div",
            connectWith: '.group-items'
        });

        $(".hide-or-show").on("click", function(){
            var temp = $(".sortable").html();
            $(".sortable").empty().append(temp);
        });

    })


</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;
    }
    .movable-placeholder {
        background: #ccc;
        width: 400px;
        height: 100px;
        display: block;
        padding: 20px;
        margin: 0 0 15px 0;
        border-style: dashed;
        border-width: 2px;
        border-color: #000;
    }
    .hide-or-show {
        background: rgba(169, 241, 134, 0.7);
        display: inline-block;
        padding: 15px;
        border: 2px solid #008000;
        position: absolute;
        top: 10px;
        left: 500px;
            cursor: pointer;
    }
</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>
    </div>

    <div class="group-caption">
        <h4>PARENT #2</h4>
        <div class="move">+</div>
        <div class="group-items">
            <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 #5<div class="move">+</div></div>
            <div class="group-item">CHILD #6<div class="move">+</div></div>
        </div>
    </div>

    <div></div>

</div>

<div class="hide-or-show">PRESS HIDE & SHOW</div>

Answer 1

if you put your .sortable in a function like that :

function initialise() {
        // 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: "document",
            items: "> div",
            connectWith: '.group-items'
        });
    };

You will be able to reuse it after your hide / show button. Don't forget to call your initialise function at start.

Here is my solution : http://jsfiddle.net/NFeqG/