Блог

Главная - Вопросы по программированию - Jquery Orgchart-Не удалось создать узел при перетаскивании его на другой узел

Jquery Orgchart-Не удалось создать узел при перетаскивании его на другой узел

#javascript #jquery #orgchart

Вопрос:

Я создаю приведенную ниже организационную диаграмму с помощью jQuery Orgchart.js. Эта библиотека не имеет функции перетаскивания, поэтому я пытаюсь написать ее самостоятельно . Ниже приведена фотография Orgchart

введите описание изображения здесь

в приведенном ниже html — файле я написал функцию-Проблема , с которой я сталкиваюсь, заключается в том, что я могу перетаскивать, но вместо создания нового узла он меняет узел. Есть идеи, как исправить эту проблему . Внутри библиотеки, я думаю this.render = function(opts){} , создается новый узел. Как создать новый узел при перетаскивании узла, кроме 1 — го основного узла.

Дошло до точки , когда я могу перетаскивать, но в пользовательском интерфейсе это выглядит так, как показано ниже

введите описание изображения здесь

 <!DOCTYPE html>
<html>
<head>
    <title>jQuery orgChart Plugin Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="jquery.orgchart.css" media="all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>

<style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
 
  
<style type="text/css">
#orgChart{
    width: auto;
    height: auto;
}

#orgChartContainer{
    width: 1000px;
    height: 500px;
    overflow: auto;
    background: #eeeeee;
}

    </style>
</head>
<body>

    <div id="orgChartContainer">
      <div id="orgChart"></div>
    </div>
    <div id="consoleOutput">
    </div>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.orgchart.js"></script>
    <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>
</body>
</html>
Метки: