创建可放置元素的 jQuery 数组答案

【问题标题】：Create jQuery array of droppable elements创建可放置元素的 jQuery 数组
【发布时间】：2014-11-20 16:49:46
【问题描述】：

我得到了可拖动的 li - 元素和可放置的框 - 使用 jQuery UI。

我的结构：

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>

我添加了 data-type 和 data-action 属性以便更好地处理。我当前用于可拖放的 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/

【问题讨论】：

不完全清楚您要在 db 中存储哪些数据以及以何种格式存储。还有在什么时候，在每次删除后或用户保存时？

标签： jquery html arrays jquery-ui droppable

【解决方案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/

注意：点击按钮，在控制台查看结果

【讨论】：