Question

我正在尝试编写一个UI来允许操作分层数据集。

层次结构包含“容器”和“组件”元素。容器可以包含组件和其他容器。

我希望能够：

在其父容器中重新排序组件/容器
将组件/容器从一个父容器拖到另一个容器

jQuery的Sortable Widget几乎给了我所需要的东西。我能够在容器中重新排序组件并将组件从一个容器拖到另一个容器。

但是，当我尝试删除容器元素时，它会消失。

我查看了API文档，但找不到任何可以帮助我的内容。

是否可以配置jQuery Sortable来完成我需要的工作？

这是代码，它也在jsfiddle上（尝试拖动粉色div）

<!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <style type="text/css">
        .component, .container, .new-component
        {
            font-family: Sans-Serif;
            line-height: 30px;
            min-height: 30px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #333;
        }
        .container
        {
            background-color: #eee;
        }
        .container > .container
        {
            background-color: #fcc;
        }
        .component
        {
            background-color: #aaa;
        }
        .new-component
        {
            background-color: #ccd;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".container").sortable({
                placeholder: "new-component",
                connectWith: ".container"
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="component">Component 1</div>
        <div class="component">Component 2</div>
        <div class="component">Component 3</div>
        <div class="container">
            <div class="component">Component 4</div>
            <div class="component">Component 5</div>
            <div class="component">Component 6</div>
        </div>
    </div>
</body>
</html>

[我发现删除{connectWith：“。enctainer”}选项允许我重新订购组件/容器兄弟，但我失去了在容器之间移动组件的能力。]

Answer 1

我想这取决于你想要达到的嵌套级别。

如果，单个级别就足够了，那么这就可以了。如果你需要能够更深入地嵌套元素，那么就没有简单的解决方法。

<强> JS

$(function () {
    $(".container").sortable({
        placeholder: "new-component",
        //connectWith: ".container"
    });
    $(".container div").sortable({
        connectWith: ".container"
    })
});

Answer 2

我不必要地使用div元素来代表我的列表数据来对抗失败的战斗。

将它全部转换为ul和li元素就可以了。

jsfiddle下方及下方的工作代码：

<!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Sortable</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <style type="text/css">
        ul 
        {
            list-style-type: none;
        }
        ul, li 
        {
            margin: 10px;
            padding: 10px;
            border: 1px solid #333;
            min-height: 20px;
        }
        ul 
        {
            background-color: #ccd;
        }
        li
        {
            background-color: #eef;
        }
        li.new
        {
            background-color: #fff;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("ul").sortable({
                placeholder: "new",
                connectWith: "ul"
            });
        });
    </script>
</head>
<body>
    <ul>
        <li><span>Component 1</span></li>
        <li><span>Component 2</span>
            <ul>
                <li><span>Component 4</span></li>
                <li><span>Component 5</span></li>
                <li><span>Component 6</span></li>
            </ul>
        </li>
        <li><span>Component 3</span></li>
        <li>
            <span>Component 4</span>
            <ul>
                <li><span>Component 4</span></li>
                <li><span>Component 5</span></li>
                <li><span>Component 6</span></li>
            </ul>
        </li>
    </ul>
</body>
</html>

有没有办法让jQuery Sortable句柄嵌套？

2 个答案: