0

我正在尝试编写一个 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: ".container" } 选项允许我重新排序组件/容器兄弟，但我无法在容器之间移动组件。]

4

2 回答 2

1

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

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

JS

$(function () {
    $(".container").sortable({
        placeholder: "new-component",
        //connectWith: ".container"
    });
    $(".container div").sortable({
        connectWith: ".container"
    })
});
于 2013-09-26T22:48:10.013 回答
0

我使用 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>
于 2013-09-27T09:48:17.160 回答