jQuery ui排序列表中的可排序项和子项

Question

如果将任何子元素拖动到任何父元素之外,则会存储其位置.这是一个很大的问题.元素必须返回上一个父级.子元素必须能够在父元素和父元素内移动.父元素必须能够在它们之间移动.

问题:

1. 如何禁用国外父母拖动子元素？
2. 如何让父母拖右？现在,如果第一个父级的示例向下拖动到PARENT#2或PARENT#3的位置,它将不会移动

码:

<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

如果我理解你的话,你需要两个分类 - 一个用于父母,一个用于孩子,然后孩子应该connectWith是父母,你需要一个tolerance财产.

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

看我的小提琴演示.

更新#1

更新了小提琴演示,仅允许孩子绑定到其父级.