Skip to content

Commit

Permalink
fix-bug: drag&drop is not working in the hybrid chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@dabeng
dabeng committed Feb 1, 2023
1 parent f29b50f commit 0fdf0f4
Show file tree
Hide file tree
Showing 9 changed files with 155 additions and 18 deletions.
81 changes: 81 additions & 0 deletions demo/drag-drop-hybrid-chart.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Organization Chart Plugin</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/jquery.orgchart.css">
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
#chart-container { height: 600px; }
.orgchart { background: #fff; }
</style>
</head>
<body>
<div id="chart-container"></div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.orgchart.js"></script>
<script type="text/javascript" src="js/json-digger.js"></script>
<script type="text/javascript">
$(function() {

var datascource = {
'id': '1',
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
'children': [
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
'children': [
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
{ 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer' ,
'children': [
{ 'id': '8', 'name': 'Er Dan', 'title': 'engineer' },
{ 'id': '9', 'name': 'San Dan', 'title': 'engineer',
'children': [
{ 'id': '10', 'name': 'Si Dan', 'title': 'intern' },
{ 'id': '11', 'name': 'Wu Dan', 'title': 'intern' }
]
}
]}
]
}
]
},
{ 'id': '12', 'name': 'Hong Miao', 'title': 'department manager' },
{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager',
'children': [
{ 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
{ 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
'children': [
{ 'id': '16', 'name': 'Er Yue', 'title': 'engineer' },
{ 'id': '17', 'name': 'San Yue', 'title': 'UE engineer' }
]
}
]
}
]
};

var oc = $('#chart-container').orgchart({
'data' : datascource,
'nodeContent': 'title',
'draggable': true,
'verticalLevel': 3
});

oc.$chart.on('nodedrop.orgchart', function(event, extraParams) {
console.log('draggedNode:' + extraParams.draggedNode.children('.title').text()
+ ', dragZone:' + extraParams.dragZone.children('.title').text()
+ ', dropZone:' + extraParams.dropZone.children('.title').text()
);
});

});
</script>
</body>
</html>
1 change: 1 addition & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@
<li><a href="get-related-nodes.html" target="_blank">Highlight related nodes</a></li>
<li><a href="level-offset.html" target="_blank">position node in specific level</a></li>
<li><a href="nodes-of-different-widths.html" target="_blank">nodes of different widths</a></li>
<li><a href="drag-drop-hybrid-chart.html" target="_blank">drag&drop in hybrid chart</a></li>
</ol>
</section>
</body>
Expand Down
33 changes: 17 additions & 16 deletions demo/vertical-level.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,38 +20,39 @@
$(function() {

var datascource = {
'id': '1',
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'name': 'Bo Miao', 'title': 'department manager' },
{ 'name': 'Su Miao', 'title': 'department manager',
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
'children': [
{ 'name': 'Tie Hua', 'title': 'senior engineer' },
{ 'name': 'Hei Hei', 'title': 'senior engineer',
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
'children': [
{ 'name': 'Pang Pang', 'title': 'engineer' },
{ 'name': 'Dan Dan', 'title': 'UE engineer' ,
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
{ 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer' ,
'children': [
{ 'name': 'Er Dan', 'title': 'engineer' },
{ 'name': 'San Dan', 'title': 'engineer',
{ 'id': '8', 'name': 'Er Dan', 'title': 'engineer' },
{ 'id': '9', 'name': 'San Dan', 'title': 'engineer',
'children': [
{ 'name': 'Si Dan', 'title': 'intern' },
{ 'name': 'Wu Dan', 'title': 'intern' }
{ 'id': '10', 'name': 'Si Dan', 'title': 'intern' },
{ 'id': '11', 'name': 'Wu Dan', 'title': 'intern' }
]
}
]}
]
}
]
},
{ 'name': 'Hong Miao', 'title': 'department manager' },
{ 'name': 'Chun Miao', 'title': 'department manager',
{ 'id': '12', 'name': 'Hong Miao', 'title': 'department manager' },
{ 'id': '13', 'name': 'Chun Miao', 'title': 'department manager',
'children': [
{ 'name': 'Bing Qin', 'title': 'senior engineer' },
{ 'name': 'Yue Yue', 'title': 'senior engineer',
{ 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
{ 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
'children': [
{ 'name': 'Er Yue', 'title': 'engineer' },
{ 'name': 'San Yue', 'title': 'UE engineer' }
{ 'id': '16', 'name': 'Er Yue', 'title': 'engineer' },
{ 'id': '17', 'name': 'San Yue', 'title': 'UE engineer' }
]
}
]
Expand Down
21 changes: 21 additions & 0 deletions dist/js/jquery.orgchart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1094,6 +1094,7 @@
},
// when user drops the node, it will be removed from original parent node and be added to new parent node
dropHandler: function (event) {
var that = this;
var $dropZone = $(event.delegateTarget);
var $dragged = this.$chart.data('dragged');

Expand All @@ -1115,6 +1116,25 @@
if (dropEvent.isDefaultPrevented()) {
return;
}
// special process for hybrid chart
if (this.$chart.data('options').verticalLevel > 1) {
var datasource = this.$chart.data('options').data;
var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
digger.findNodeById($dragged.data('nodeData').id).then(function(draggedNode) {
var copy = Object.assign({}, draggedNode)
digger.removeNode(draggedNode.id).then(function() {
digger.findNodeById($dropZone.data('nodeData').id).then(function(dropNode) {
if (dropNode.children) {
dropNode.children.push(copy);
} else {
dropNode.children = [copy];
}
that.init({ 'data': datasource });
});
});
});
} else {
// The folowing code snippets are used to process horizontal chart
// firstly, deal with the hierarchy of drop zone
if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node
$dropZone.append('<i class="edge verticalEdge bottomEdge oci"></i>')
Expand Down Expand Up @@ -1142,6 +1162,7 @@
$dragZone.find('.bottomEdge, .symbol').remove()
.end().siblings('.nodes').remove();
}
}
},
//
touchstartHandler: function (event) {
Expand Down
2 changes: 1 addition & 1 deletion dist/js/jquery.orgchart.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/jquery.orgchart.min.js.map
View file

Large diffs are not rendered by default.

11 changes: 11 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"html2canvas": "^1.4.1",
"jquery": "^3.6.2",
"jquery-mockjax": "^2.6.0",
"json-digger": "^1.2.2",
"jspdf": "^2.5.1"
},
"devDependencies": {
Expand Down
21 changes: 21 additions & 0 deletions src/js/jquery.orgchart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1094,6 +1094,7 @@
},
// when user drops the node, it will be removed from original parent node and be added to new parent node
dropHandler: function (event) {
var that = this;
var $dropZone = $(event.delegateTarget);
var $dragged = this.$chart.data('dragged');

Expand All @@ -1115,6 +1116,25 @@
if (dropEvent.isDefaultPrevented()) {
return;
}
// special process for hybrid chart
if (this.$chart.data('options').verticalLevel > 1) {
var datasource = this.$chart.data('options').data;
var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
digger.findNodeById($dragged.data('nodeData').id).then(function(draggedNode) {
var copy = Object.assign({}, draggedNode)
digger.removeNode(draggedNode.id).then(function() {
digger.findNodeById($dropZone.data('nodeData').id).then(function(dropNode) {
if (dropNode.children) {
dropNode.children.push(copy);
} else {
dropNode.children = [copy];
}
that.init({ 'data': datasource });
});
});
});
} else {
// The folowing code snippets are used to process horizontal chart
// firstly, deal with the hierarchy of drop zone
if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node
$dropZone.append('<i class="edge verticalEdge bottomEdge oci"></i>')
Expand Down Expand Up @@ -1142,6 +1162,7 @@
$dragZone.find('.bottomEdge, .symbol').remove()
.end().siblings('.nodes').remove();
}
}
},
//
touchstartHandler: function (event) {
Expand Down

0 comments on commit 0fdf0f4

Please sign in to comment.