JSFiddle - React, Tailwind, and code Playground

by bluey

JavaScript

var Nestable = function () {

    var updateOutput = function (e) {
        var list = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };



    // activate Nestable for list 1
    $('#nestable_list_1').nestable({
        group: 1
    })
        .on('change', updateOutput);

    // activate Nestable for list 2
    $('#nestable_list_2').nestable({
        group: 1
    })
        .on('change', updateOutput);

    // output initial serialised data
    updateOutput($('#nestable_list_1').data('output', $('#nestable_list_1_output')));
    
    //save intial data once btn is clicked
    $('.nestedListSaveBtns').click(function(){
        theButton = $(this).attr('id');
        var id = theButton.replace('nestable_list_save_','');
        saveNested(id);
    });
    
    function saveNested(objectID)
    {
        toSave = $('#nestable_list_'+objectID+'_output');
        
        data = toSave.val();
        postFile = 'postNestedListSaveFile.php';
        $.ajax({
            type        : 'POST',
            dataType    : 'html',
            url         : postFile,
            data        : data,
        })
        
        .done(function(data)
        {            
            alert(data);
        })
        
        .fail(function(data, status)
        {
            alert('Error: '+status);
        });
        
    }
    
    
    updateOutput($('#nestable_list_2').data('output', $('#nestable_list_2_output')));

    $('#nestable_list_menu').on('click', function (e) {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
...