JSFiddle - React, Tailwind, and code Playground

by bairog

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jkanban.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jkanban.min.js"></script>


<div id="kanbanDiv"> </div>

JavaScript

var KanbanTest = new jKanban({
        element: "#kanbanDiv",
        responsivePercentage: true,
        dragBoards: false,
        dropEl: function (el, target, source, sibling) {
    var sourceBoardId = source.parentElement.getAttribute('data-id');
    var targetBoardId = target.parentElement.getAttribute('data-id');
    
		//form is already created - cancel drag
    if ($(".kanban-board").find('.form-group').length > 0)
        KanbanTest.drake.cancel(true);
    else {
        var formItem = document.createElement("form");
        formItem.setAttribute("class", "itemform");
        formItem.innerHTML =
            '<div class="form-group"><button id="Ok">Confirm drag</button></button><button id="Cancel">Cancel drag</button></div>'

        KanbanTest.addForm(targetBoardId, formItem);
        $("#Ok").click(function (e) {
             e.preventDefault();
						 formItem.parentNode.removeChild(formItem);
        });

        $("#Cancel").click(function (e) {
				    e.preventDefault();
            var itemId = el.dataset.eid;
            var itemText = el.innerText;            
            formItem.parentNode.removeChild(formItem);
						
            KanbanTest.removeElement(itemId);
						//RETURNING ELEMENT TO THE SOURCEBOARD TO THE MIDDLE POSITION - THAT DOESN'T WORK!
            KanbanTest.addElement(sourceBoardId, {
        id: itemId,
        title: itemText
    }, 1);
        });
    }
    
        },
        boards: [
            {
                id: "Board1",
                title: "Board1",
                item: [                           // item of this board
            {
                "id"    : "Item11",        // id of the item
                "title" : "Do not touch!"            // title of the item                
            },
            {
                "id"    : "Item12",
                "title" : "Drag me and then press Cancel drag button!"
            },
            {
                "id"    : "Item13",
                "title" : "Do...