Drag And Drop Items to the Chart - OrgChart JS | BALKANGraph

Drag And Drop Item from the keft hand side list to a node author(s): BALKAN Software Plamen Peshev

by thomas_david88

HTML

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>

<div id="tree"></div>
<div id="items">
    <div data-id="4" class="item">
        Elliot Ross
    </div>
    <div data-id="5" class="item">
        Anahi Gordon
    </div>
    <div data-id="6" class="item">
        Knox Macias
    </div>
    <div data-id="7" class="item">
        Nash Ingram
    </div>
    <div data-id="8" class="item">
        Reuben Mcleod
    </div>
       <div data-id="9" class="item">
        Reuben Mcleod
    </div>
       <div data-id="10" class="item">
        Reuben Mcleod
    </div>
       <div data-id="11" class="item">
        Reuben Mcleod
    </div>
        <div data-id="12" class="item">
        Reuben Mcleod
    </div>
       <div data-id="13" class="item">
        Reuben Mcleod
    </div>
</div>

CSS

html,
body {
    font-family: Helvetica;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#tree {
    width: 80%;
    height: 100%;
    float: left;
}

#items{            
    width: 19%;
    height: 100%;
    float: right;
}
.item{            
    margin: 10px;
    padding: 10px;
    text-align: center;
    background-color: #f2f2f2;
    border: 1px solid #F57C00;
    color: #757575;
    border-radius: 20px;
    user-select: none;
}

JavaScript

window.onload = function () {
    var currentNode = '';
    var clientXY = [0,0];


    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name"
        }
    });

    var menu = new OrgChart.menuUI();
    menu.init(chart, {
        addAsAssistant: {
            icon: '',
            onClick: function(){
                currentNode.tags = ['assistant'];
                chart.addNode(currentNode);
            },
            text: 'Add As Assistant'
        },        
        addAsRegular: {
            icon: '',            
            onClick: function(){
                chart.addNode(currentNode);
            },
            text: 'Add As Regular'
        }
    });

    chart.on('redraw', function(){

        var nodeElements = document.querySelectorAll('[node-id]');
        
        for(var i = 0; i < nodeElements.length; i++){
            var nodeElement = nodeElements[i];
            nodeElement.ondrop = function(ev) {
                ev.preventDefault();   
                clientXY = [ev.clientX, ev.clientY];
                var id = ev.dataTransfer.getData("id");
                var item = document.querySelector('[data-id="' + id + '"]');
                var name = item.innerHTML;

                var nodeElement = ev.target;
                while(!nodeElement.hasAttribute('node-id')){
                    nodeElement = nodeElement.parentNode;
                }                
                var pid = nodeElement.getAttribute('node-id');  
                
                
                chart.addNode({
                    id: id,
                    pid: pid,
                    name: name
                }, true);

                item.parentNode.removeChild(item);
            }

            nodeElement.ondragover = function(ev) {
                ev.preventDefault();
            }
        }
        
    });

    chart.on('add', function(sender, node){
        currentNode = node;
       ...