filebrowser: added drag and drop of files within the filebrowser

vispa/extensions/file/static/css/base/base.css

@@ -73,3 +73,14 @@
     background-color: #f5f5f5;
     border: #000000 1px solid;
 }
+
+.file-dragstart {
+    opacity: 0.4;
+}
+
+
+
+[draggable=true] {
+  cursor: move;
+  -khtml-user-drag: element;
+}

vispa/extensions/file/static/html/table.html

@@ -10,7 +10,7 @@
   </div>
 
   <div class="row files-table file-view-content-container">
-    <div class="file-node row file-table-object file-table-content" data-bind="data">
+    <div draggable="true" class="file-node row file-table-object file-table-content" data-bind="data">
       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 file-table-select"><span class="file-selection-p input"><input type="checkbox" class="file-selection-checkbox" /></span></div>
       <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1 file-table-icon">
         <img data-bind="icon">

vispa/extensions/file/static/js/base/actions.js

@@ -73,10 +73,10 @@ var FileBaseActions = Class.extend({
               self._openWithCodeEditor(path);
             } else self.FileBase.instance.confirm("Do you want to download \"" + name + " (" +
               size + ")\"?", function(res2) {
-              if(res2 === true) {
-                self.download();
-              }
-            });
+                if (res2 === true) {
+                  self.download();
+                }
+              });
           });
       }
       // })
@@ -171,6 +171,15 @@ var FileBaseActions = Class.extend({
     });
   },
 
+  move: function(source, destination) {
+    var self = this;
+    var dfd = self.FileBase.instance.GET("/ajax/fs/move", {
+      "source": JSON.stringify(source),
+      "destination": JSON.stringify(destination)
+    });
+  },
+
+
   remove: function() {
     var self = this;
     this.entries = Object.keys(this.FileBase.selections.entries);
@@ -353,6 +362,7 @@ var FileBaseActions = Class.extend({
 
   upload: function(path) {
     // blueimp jquery file upload
+    console.log("upload");
     var self = this;
     if (path === undefined) {
       var path = this.FileBase.workflow.path;

vispa/extensions/file/static/js/base/events.js

@@ -177,9 +177,13 @@ var FileBaseEvents = Class.extend({
   DragAndDrop: function(node, data) {
     var self = this;
 
+    node.on('dragstart', function(event) {
+      event.originalEvent.dataTransfer.setData('dataName', data.name);
+      $(node).addClass("file-dragstart");
+    });
+
     node.on('dragover', function(event) {
       event.preventDefault();
-      event.stopPropagation;
       if (data.type == "d") {
         $(node).addClass("file-dragover");
       }
@@ -187,28 +191,31 @@ var FileBaseEvents = Class.extend({
 
     node.on('dragenter', function(event) {
       event.preventDefault();
-      event.stopPropagation;
     });
 
     node.on('dragleave', function(event) {
       event.preventDefault();
-      event.stopPropagation;
       $(node).removeClass("file-dragover");
     });
 
     node.on('drop', function(event) {
       event.preventDefault();
-      event.stopPropagation;
-
       $(node).removeClass("file-dragover");
-
-      if (data.type == "d") {
-        var path = self.FileBase.workflow.path + '/' + data.name;
+      $(node).removeClass("file-dragstart");
+      fileToBeMoved = (event.originalEvent.dataTransfer.getData('dataName'));
+      if (fileToBeMoved == "") {
+        if (data.type == "d") {
+          var path = self.FileBase.workflow.path + '/' + data.name;
+        } else {
+          var path = self.FileBase.workflow.path;
+        }
+        self.FileBase.actions.upload(path);
       } else {
-        var path = self.FileBase.workflow.path;
+        var source = self.FileBase.workflow.path + '/' + fileToBeMoved;
+        var destination = self.FileBase.workflow.path + '/' + data.name;
+        self.FileBase.actions.move(source, destination);
       }
 
-      self.FileBase.actions.upload(path);
     });
 
   }

vispa/extensions/file/static/js/base/view.js

@@ -84,23 +84,13 @@ var FileBaseView = Class.extend({
         self.FileBase.menuitems.makeMenuClickable();
       });
 
-
-      // self.dropdings = $(".dropzone-dir", contentNode);
-      // console.log(self.dropdings);
-
-      // drag and drop
-      // self.dragAndDrop();
-
-
-
-
       // default view
       self.FileBase.changeView(self.FileBase.workflow.currentView);
 
       // set width and left margin
       var r = self.instance.getPreference("BookmarkRatio");
-      $(".file-content").css("width",String(100-r) + "%");    
-      $(".file-content").css("left",String(r) + "%");
+      $(".file-content").css("width", String(100 - r) + "%");
+      $(".file-content").css("left", String(r) + "%");
     });
     self.instance.getTemplate("html/filter.html", function(err2, filterField, dfd2) {
       self.filterField = $(filterField);