Support drag/drop of flow json onto the canvas

Closes #43

public/index.html

@@ -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>

public/red/main.js

@@ -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()) {
 

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;
 }