1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Support drag/drop of flow json onto the canvas

Closes #43
This commit is contained in:
Nick O'Leary 2013-12-31 21:32:50 +00:00
parent 1c010c568d
commit 5219d08cb8
3 changed files with 41 additions and 1 deletions

View File

@ -145,6 +145,7 @@
<div id="notifications"></div>
<div id="dropTarget"><div>Drop the flow here</div></div>
<div id="dialog" class="hide"><form id="dialog-form" class="form-horizontal"></form></div>
<div id="node-config-dialog" class="hide"><form id="dialog-config-form" class="form-horizontal"></form><div class="form-tips" id="node-config-dialog-user-count"></div></div>

View File

@ -17,6 +17,28 @@ var RED = function() {
$('#btn-keyboard-shortcuts').click(function(){showHelp();});
$('#chart').on("dragenter",function(event) {
if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
$("#dropTarget").css({display:'table'});
}
});
$('#dropTarget').on("dragover",function(event) {
if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
event.preventDefault();
}
})
.on("dragleave",function(event) {
$("#dropTarget").hide();
})
.on("drop",function(event) {
var data = event.originalEvent.dataTransfer.getData("text/plain");
RED.view.importNodes(data);
$("#dropTarget").hide();
});
function save(force) {
if (RED.view.dirty()) {

View File

@ -19,6 +19,23 @@ body {
padding-top: 100px;
background: url("pw_maze_white.png");
}
#dropTarget {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background: rgba(100,100,100,0.5);
display:table;
width: 100%;
height: 100%;
display: none;
}
#dropTarget div {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 40px;
color: #fff;
}
a.brand {
line-height: 16px;
}