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">
<div id="container">
<div class="fx-draggable ui-widget ui-widget-header ui-corner-all" data-classname="ReimbursementLine" data-objid="1">Krediet 000-0000000-97</div>
<div class="fx-draggable ui-widget ui-widget-header ui-corner-all" data-classname="Waarborg" data-objid="2">Levensverzekering HO</div>
<div class="fx-draggable ui-widget ui-widget-header ui-corner-all" data-classname="Waarborg" data-objid="1">Levensverzekering MO</div>
<div class="fx-draggable ui-widget ui-widget-header ui-corner-all" data-classname="Party" data-objid="5">John Doe</div>
</div>



<a href="#" class="fx-button fx-add-object" data-classname="Party">Add Party</a>
<a href="#" class="fx-button fx-add-object" data-classname="Waarborg">Add Waarborg</a>
<fieldset id="messages">
    <legend>Log:</legend>
</fieldset>

CSS

div.container div {
    float: left;
    width: 220px;
}

.ui-draggable-dragging {
    background-color: #efefef;
    color: #666;
}

.fx-draggable {
    border: 1px solid #ccc;
    margin: 15px;
    padding: 10px;
}
.fx-droppable {
    border: 1px solid #ddd;
    margin: 15px;
    padding: 10px;
    background-color: #159;
}

JavaScript

function getDivSummary(div) {
    return $(div).attr("data-classname") + " " + $(div).attr("data-objid") + " - " + $(div).html();
}

$(document).ready(function(){
    $('.fx-draggable')
        .draggable({
            containment: 'parent',
            revert: true
        })
        .droppable({
        accept: ".fx-draggable",
        drop: function(ev, ui) {
            $('.fx-droppable').removeClass('dropped');
            $('#messages').html(getDivSummary(ui.draggable) + 
                ' dropped on ' + 
                    getDivSummary($(this)) + '--> ajax call to save relation here...<br/>' + $('#messages').html());
                 
        }
    });
    
    $('.fx-button').button();
    $('.fx-add-object').click(function(e) {
       e.preventDefault();
        $('<div><label>Geef naam (demo):</label><input type="text"></div>')
            .attr("data-classname", $(this).attr("data-classname"))
            .dialog({
                modal: true,
                buttons: {
                    "Toevoegen": function() {
                        $("#container").append($('<div></div>')
                          .addClass('fx-draggable ui-widget ui-widget-header ui-corner-all')
                          .attr('data-classname', $(this).attr("data-classname"))
                          .attr('data-objid', 'dummy')
                          .html($(this).children('input').val())
                          .draggable({
                                containment: 'parent',
                                revert: true
                            })
                            .droppable({
                            accept: ".fx-draggable",
                            drop: function(ev, ui) {
                                $('.fx-droppable').removeClass('dropped');
                                $('#messages').html(getDivSummary(ui.draggable) + 
                                    ' dropped on ' + 
                                        getDivSummary($(this)) +...