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

如果我对您的理解正确，您需要两个 sortable - 一个给父母，一个给孩子，然后孩子应该 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'
});

见我的Fiddle demo。

--- 更新 #1 ---

更新了Fiddle demo 2，只允许子级绑定到其父级。

--- 更新 #2 ---

更新了Fiddle demo 3，在每个子元素上都有一个占位符，并允许拖动到空父元素。空父只需要一个min-height CSS。