创建可放置元素的jQuery数组 [英] Create jQuery array of droppable elements

问题描述

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

I got draggable li - elements and droppable boxes - using 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>

我添加了数据类型和数据操作属性，以实现更好的处理. 我当前用于可拖放对象的jQuery代码:

I added data-type and data-action attributes for better handling. My current jQuery code for draggable and droppable:

$("#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 DB中. 完美的将是带有这样的字符串的数组:

This works perfect - but now i want to write the data in my MySQL DB. Perfect would be an array with strings like this:

服务器[创建]，用户等

因此，如果提交，我认为我必须将所有删除的元素存储在数组中-但我不知道如何获取它们(然后将其设置为hidden-field的值):

So if submit i think i have to store all dropped elements in an array - but i don't know how to get them (then set it as value of hidden-field):

$('#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/

推荐答案

您可以尝试以下代码:

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/

注意:单击按钮，然后在控制台中查看结果

Note: Click on the button and see the results in console

这篇关于创建可放置元素的jQuery数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！