Question

我的页面包含三列包含div：

<div id="container">
    <div class="column">
        <div class="portlet" id="1">1</div>
        <div class="portlet" id="2">2</div>
        <div class="portlet" id="3">3</div>
    </div>
    <div class="column">
        <div class="portlet" id="4">4</div>
        <div class="portlet" id="5">5</div>
        <div class="portlet" id="6">6</div>
    </div>
    <div class="column">
        <div class="portlet" id="7">7</div>
        <div class="portlet" id="8">8</div>
        <div class="portlet" id="9">9</div>
    </div>
</div>

每个portlet都是可排序和可拖动的。我希望用户能够以他们想要的顺序拖动portlet然后保存它。下次他们打开页面时，该站点将接收JSON数据，例如：

var portletOrder = {"column1":["3", "4", "7"],
            "column2":["1", "9"],
            "column3":["2", "6", "8", "5"]};

我希望页面根据portletOrder值按顺序对portlet进行排序。

我创建了jsfiddle并且我不太确定如何填充sort函数。

https://jsfiddle.net/9v5eL8uL/

我希望预期的结果看起来像这样

Answer 1

不打算为你编写应用程序，但一种可能的方法是将所有内容包装在像

这样的表单中

<form action="..." method="post"></form>

为每个portlet添加一个隐藏的输入字段，如

<div class="portlet" id="portlet-id-1">
  <input type="text" value="portlet-id-1" name="sameNameForEveryInput" style="display:none;" />portlet-id-1
</div>
<div class="portlet" id="portlet-id-2">
  <input type="text" value="portlet-id-2" name="sameNameForEveryInput" style="display:none;" />portlet-id-2
</div>
...
<input type="submit" name="submitButtonName" />

并在要保存时使用提交按钮提交表单。使用PHP，您可以执行类似

的操作

if(isset($_POST['submitButtonName']))
{
    //do something with $_POST['sameNameForEveryInput'] which is now a array
}

加载页面后，您可以使用例如PHP订购portlets。

Answer 2

让你的JavaScript重新排列DOM中的项目，根据它们的排序方式（根据JSON订购信息）。

或者，似乎这些信息可能是由某种服务器端技术生成的。 JSON订购信息中的信息是否也出现在同一个地方？您能否在服务器端读取该信息并以所需顺序发送portlet HTML？

Answer 3

假设使用JSON格式，您可以执行以下操作：

获取“#container .column”下的列（jQuery以DOM顺序获取它们，因此数组中的第一个对应于json中的column1）
遍历此列表，从JSON对象中检索列并重新排列所有内容。

此算法有效，因为它假定所有portlet都在JSON对象中定义（否则，某些portlet不会被移动，结果会很奇怪）。

$(function () {
    var portletOrder = {"column1": ["3", "4", "7"],
        "column2": ["1", "9"],
        "column3": ["2", "6", "8", "5"]},
        // Retrieves columns in DOM order, so column1 will be element 0 of the array.
        myColumns = $("#container .column"),
        i = 1;

    myColumns.each(function() {
        var column = this;
        $.each(portletOrder['column' + i], function(_, portlet) {
            $('#' + portlet).detach().appendTo(column);
        });
        i += 1;
    });
});

这是。希望它有所帮助。

根据JSON订购div

3 个答案: