JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<button class="temp">Click</button>
<form id="userForm" action="">
    <input type="hidden" name="rights" value="">
    <div id="rights">
        <ul>
            <li data-action="create">Create</li>
            <li data-action="edit">Edit</li>
            <li data-action="delete">Delete</li>
        </ul>
        <hr>
        <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>
    </div>
</form>

CSS

.box {
    min-height: 200px;
    width: 150px;
    background: #ddd;
}

JavaScript

$(document).ready(function () {
    $("#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();
        });
    });

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

function getdata() {
    $('.temp').on('click', function () {
        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
        });
        console.log(result);
    });
}
getdata();