创建可放置元素的jQuery数组

Question

我使用jQuery UI获得了可拖动的li - 元素和droppable box。

我的结构：

3种权限类型的列表

<ul>
    <li data-action="create">Create</li>
    <li data-action="edit">Edit</li>
    <li data-action="delete">Delete</li>
</ul>

还有3个领域：

<div class="row">

    <div class="col-md-3 col-sm-6">
        <h3>Server</h3>
        <ul class="box" data-type="server"></ul>
    </div>

    <div class="col-md-3 col-sm-6">
        <h3>Games</h3>
        <ul class="box" data-type="games"></ul>
    </div>

    <div class="col-md-3 col-sm-6">
        <h3>User</h3>
        <ul class="box" data-type="user"></ul>
    </div>

</div>

我添加了数据类型和数据操作属性以便更好地处理。 我目前用于draggable和droppable的jQuery代码：

$("#rights > ul > li").draggable({
    appendTo: "body",
    helper: "clone"
});

$("#rights ul.box").droppable({
    activeClass: "helperclass",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) {
        $(this).find(".placeholder").remove();
        $("<li></li>").html(ui.draggable.text() + '<span class="close">x</span>').appendTo(this);
    }
});

$("#rights").on('click', '.close', function () {
    $(this).parent().slideUp(200, function() { $(this).remove(); } );
});

这很完美 - 但现在我想在我的MySQL数据库中写入数据。 完美将是一个像这样的字符串数组：

服务器[创建]，用户[编辑]等

因此，如果提交我认为我必须将所有已删除的元素存储在数组中 - 但我不知道如何获取它们（然后将其设置为隐藏字段的值）：

$('#userForm').submit(function() {
    $('#rights .box').each(function() {
        var currentBox = $(this).data('type');
        //Get all data-actions for this box 
    });
});

jsFiddle ：http://jsfiddle.net/xw2djxdp/3/

Answer 1

您可以尝试以下代码：

var result = {};
    $('ul.box').each(function () {
        var type = $(this).attr('data-type');
        var elements = [];
        $(this).find('li').each(function () {
            elements.push($(this).text());
        });
        result[type] = elements
    });

演示：http://jsfiddle.net/lotusgodkk/xw2djxdp/4/

注意：单击按钮并在控制台中查看结果