0

I am creating the below org chart using JQuery Orgchart.js. This library doesn't have drag drop functionality, so i am trying to write it of my own

In html file below function i have written for drag drop.- The issue here i am facing is i am able to drag and drop , but it is unable to reparent the draggable node. Any idea how to fix this issue . Below it looks like

enter image description here

<script type="text/javascript">
    var testData = [
        {id: 1, name: 'My Organization', parent: 0},
        {id: 2, name: 'CEO Office', parent: 1},
        {id: 3, name: 'Division 1', parent: 1},
        {id: 4, name: 'Division 2', parent: 1},
        {id: 6, name: 'Division 3', parent: 1},
        {id: 7, name: 'Division 4', parent: 1},
        {id: 8, name: 'Division 5', parent: 1},
        {id: 5, name: 'Sub Division', parent: 3},
        
    ];
    $(function(){
        org_chart = $('#orgChart').orgChart({
            data: testData,
            showControls: true,
            allowEdit: true,
            onAddNode: function(node){ 
                log('Created new node on node '+node.data.id);
                org_chart.newNode(node.data.id); 
            },
            onDeleteNode: function(node){
                log('Deleted node '+node.data.id);
                org_chart.deleteNode(node.data.id); 
            },
            onClickNode: function(node){
                log('Clicked node '+node.data.id);
            }

        });
    $( ".draggable" ).draggable({revert: true, snap: 'inner'});
        $( ".droppable" ).droppable({
        drop: function( event, ui ) {
        var draggable = ui.draggable;
        var id = draggable.attr("node-id");
        
        var droppable = ui.droppable;
        var droppableId = $(this).attr("node-id");
        $(this).append(ui.draggable);
        }
    });
    });        

    // just for example purpose
    function log(text){
        $('#consoleOutput').append('<p>'+text+'</p>')
    }
    </script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.