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>

- djmartini

---

你能在JSFiddle里面做一个模拟吗？ - JF it

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

查看我的Fiddle演示。

--- 更新＃1 ---

更新Fiddle演示2，只允许子元素绑定到其父元素。

--- 更新＃2 ---

更新Fiddle演示3，为每个子元素添加占位符并允许将其拖动到空的父元素。空的父元素只需要一个min-height CSS。

- Beauvais

---

一个有趣的方法，但需要使用你评论的所有内容。 - djmartini

太好了！能否获取嵌套父子关系的序列化数据？ - Dave

但我需要第一个小提琴演示，而不是更新的版本。但是，当父级为空时，无法将其拖放到空父级中。请更新小提琴以修复第一个演示。 - fahdshaykh

@fahdshaykh - 此处更新了“Fiddle演示3”。 - Beauvais