我正在使用jquery orgchart.js创建下面的组织结构图。这个库没有拖放功能，所以我试着自己编写它。下面是组织结构图的图片
在此处输入图像描述
在我编写的函数下面的html文件中，我面临的问题是我可以拖放，但不是创建一个新节点，而是反转节点。你知道如何解决这个问题吗。我想在图书馆里面 this.render = function(opts){} 一个是创建一个新节点。如何在拖放除第一个主节点之外的节点时创建新节点。
直到我可以拖放到某个点，但在ui中它看起来如下所示
在此处输入图像描述
<!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>
暂无答案！
目前还没有任何答案，快来回答吧！