JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<ul id=keywords class=box>
    <li>Bestellung</li>
    <li>Order</li>
    <li>Anfrage</li>
    <li>please quote</li>
    <li>Reklamation</li>
    <li>out of order</li> 
    <li>finanzieren</li> 
    <li>cash</li>  
    <li>payment advice</li> 
</ul>

<ul id=processsteps class="box connectedlist">
     <li class="keyworddrop step">Bestellanfrage eingegangen</li>
     <li class="keyworddrop step">Bonität prüfen</li>
     <li class="keyworddrop step">Lager prüfen</li>
     <li class="keyworddrop step">Bestellung eingegangen</li>
     <li class="keyworddrop step">Angebot erstellen</li>
     <li class="keyworddrop step">Ware versenden</li>
     <li class="keyworddrop step">Produktionsauftrag anlegen</li>
     <li class="keyworddrop step">Kunde absagen</li>
</ul>

<ol id=processtype class="box connectedlist">
    
</ol>
<hr>
<a id=newkeyword>Neues Keyword</a> | <a id=newstep>Neuer Prozessschritt</a>

CSS

body {font-family:sans-serif;font-size:11pt;}
ul,ol,li {user-selection:none;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.box { min-height:150px;list-style:none; width:180px; display:block;margin:10px; padding:4px; float:left; border:2px solid silver;}
.box > li {display:block;text-align:center;margin:2px;padding:3px;border:1px solid gainsboro;}
.sublist {min-height:17px;border:1px solid red;}
#keywords {width:205px;}
#keywords li {display:inline-block;background-color:lightblue;border-radius:6px;border:none;z-index:200;}
#processtype > li { min-height:40px;position:relative;margin-bottom:12px;background-color:lightgray;border:none;}

#processsteps .step {background-color:rgba(255,255,255,0.7);}

.step .keywords { list-style:none;display:block;padding:0px;margin:0px;}
.step .keywords li {margin:0px;display:inline-block;border-radius:6px;padding:0px 3px 0px 3px;background-color:lightblue;border:none;font-size:70%;margin:0px 0px 0px 2px;}
.step.dropzone { background-color:gainsboro!important;}
.step.drophover { background-color:silver!important;} 

#keywords:before { content:"Keywords:"; }
#processsteps:before { content:"Ungenutzte Prozessschritte:"; }
#processtype:before { content:"Prozesstyp bauen:"; }  

#processtype > li:not(:last-child):before { position:absolute;bottom:-14px; left:calc(50% - 10px); content:"\25bc";font-size:16px;color:lightgray; }
#processtype > li.dropzone:not(:last-child):before {color:gainsboro;}
#processtype > li.drophover:not(:last-child):before {color:silver;}

hr {clear:both;}

.ui-draggable, .ui-sortable { cursor:default; } 
a {cursor:pointer;}

JavaScript

$("#keywords > li").draggable({
    revert: true,
    revertDuration: 140
});
/*$("#processsteps > .step").draggable({revert:true,revertDuration: 140}); 
 */

var stepdropconfig = {
    accept: "#keywords > li",
    drop: function (event, ui) {
        if ($(this).children(".keywords").length > 0) {
            $(this).children(".keywords").prepend($("<li>").text($(ui.draggable).text()));
        } else {
            $(this).append($("<ul>").addClass("keywords").append($("<li>").text($(ui.draggable).text())));
        }
    },
    hoverClass: "drophover",
    activeClass: "dropzone"
};

$('.step').droppable(stepdropconfig);

$("#processsteps, #processtype").sortable({
    connectWith: ".connectedlist"
});

$('#processsteps, #processtype').on("contextmenu", "li .keywords li", function () {
    $(this).remove();
    return false;
});

$("#newstep").click(function() {
    var name=window.prompt("Wie soll der Schritt lauten?","Neuer Schritt");
    if (name == null) {return false;}
    $("#processsteps").prepend($("<li>").addClass("keyworddrop step").text(name)); 
    $('.step').droppable(stepdropconfig);
});


$("#newkeyword").click(function() {
    var name=window.prompt("Wie soll das Keyword lauten?","Neues Keyword");
    if (name == null) {return false;}
    $("#keywords").prepend($("<li>").addClass("ui-draggable").text(name));
    $("#keywords > li").draggable({
        revert: true,
        revertDuration: 140
    });
    
});