JSFiddle - React, Tailwind, and code Playground

by flexin

HTML

<link rel="stylesheet" href="http://flexin.be/templates/2010/css/jquery-ui-1.8.4.custom.css">
<script src="http://raphaeljs.com/raphael.js"></script>
<div id="container">
    <div id="Assets" class="ui-widget ui-widget-content ui-corner-all"></div>
    <div id="Collaterals" class="ui-widget ui-widget-content ui-corner-all"></div>
    <div id="KOs" class="ui-widget ui-widget-content ui-corner-all"></div>
</div>
<div id="actions">
    <a href="#" data-classname="Asset" data-targetdiv="Assets">Asset toevoegen</a>
    <a href="#" data-classname="Collateral" data-targetdiv="Collaterals">Waarborg toevoegen</a>
    <a href="#" data-classname="Kredietopening" data-targetdiv="KOs">Kredietopening toevoegen</a>
</div>
<div class="ui-widget ui-widget-header ui-corner-top" style="marging-bottom:0px">Event log:</div>
<div id="log" class="ui-widget ui-widget-content ui-corner-bottom" style="marging-top:0px"></div>

CSS

div {
    margin: 5px;
    padding: 5px;
}

JavaScript

$(document).ready(function() {
    $("#actions a").button().click(function(e) {
        $('#log').prepend("Clicked button " + $(this).html() + "<br/>");
        // make sure the normal behaviour of a link is disabled
        e.preventDefault();

        // show a dialog form to search the desired item to be added...
        $('<div></div>').attr("data-targetdiv", $(this).attr("data-targetdiv")).append('<label>Naam: ' + $(this).attr('data-classname') + '</label><input type="text"/>').dialog({
            modal: true,
            buttons: {
                'Toevoegen': function() {
                    $('<div></div>').html($(this).children('input').val()).append($('<button></button>').button({
                        icons: {
                            primary: "ui-icon-info"
                        },
                        text: false
                    }).click(function() { $('<div title="Informatiebox">Informatie over object kan hier getoond worden</div>').dialog(); })).append($('<button></button>').button({
                        icons: {
                            primary: "ui-icon-circle-close"
                        },
                        text: false
                    }).click(function() { $(this).parent('div').remove(); })).appendTo('#' + $(this).attr("data-targetdiv")).addClass('ui-widget ui-widget-header ui-corner-all').css('width', '150px').css('display', 'inline').draggable({
                        revert: true,
                        stack: '#container'
                    }).droppable({
                        drop: function(ev, ui) {
                            if ($(this).parent('div').attr("id") == $(ui.draggable).parent('div').attr("id")) {
                                $('#log').prepend("2 items van zelfde type op elkaar gedropped --> niet toegelaten <br/>");
                            } else {
                                $('#log').prepend($(ui.draggable).html() + " werd gedropped op " + $(this).html() + " - ajax call om...