diff --git a/public/index.html b/public/index.html
index 49fcc0d08..8fafa6550 100644
--- a/public/index.html
+++ b/public/index.html
@@ -145,6 +145,7 @@
+
diff --git a/public/red/main.js b/public/red/main.js
index fb1c98ccc..074ed6bb9 100644
--- a/public/red/main.js
+++ b/public/red/main.js
@@ -16,7 +16,29 @@
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()) {
diff --git a/public/style.css b/public/style.css
index 36802e0c3..6ea6f9616 100644
--- a/public/style.css
+++ b/public/style.css
@@ -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;
}