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},
        org_chart = $('#orgChart').orgChart({
            data: testData,
            showControls: true,
            allowEdit: true,
            onAddNode: function(node){ 
                log('Created new node on node '+node.data.id);
            onDeleteNode: function(node){
                log('Deleted node '+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");

    // just for example purpose
    function log(text){

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.