[SSE] Move sheet: drag and drop

apps/common/main/lib/component/Tab.js

@@ -51,8 +51,9 @@ define([
         this.active     = false;
         this.label      = 'Tab';
         this.cls        = '';
+        this.index = -1;
         this.template   = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">',
-                                            '<a title="<%= label %>" draggable="true" oo_editor_input="true" tabindex="-1"><%- label %></a>',
+                                            '<a title="<%= label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- label %></a>',
                                         '</li>'].join(''));
 
         this.initialize.call(this, opts);

apps/common/main/lib/component/TabBar.js

@@ -249,6 +249,11 @@ define([
                     img = document.createElement('div');
                 event.dataTransfer.setDragImage(img, 0, 0);
                 event.dataTransfer.effectAllowed = 'move';
+                this.bar.trigger('tab:dragstart', event.dataTransfer, this.bar.selectTabs);
+            }, this),
+            dragenter: $.proxy(function (e) {
+                this.bar.$el.find('.mousemove').removeClass('mousemove right');
+                $(e.currentTarget).parent().addClass('mousemove');
             }, this),
             dragover: $.proxy(function (e) {
                 var event = e.originalEvent;
@@ -258,6 +263,15 @@ define([
                 event.dataTransfer.dropEffect = 'move';
                 return false;
             }, this),
+            dragend: $.proxy(function (e) {
+                this.bar.$el.find('.mousemove').removeClass('mousemove right');
+            }, this),
+            drop: $.proxy(function (e) {
+                var event = e.originalEvent,
+                    index = $(event.currentTarget).data('index');
+                this.bar.$el.find('.mousemove').removeClass('mousemove right');
+                this.bar.trigger('tab:drop', event.dataTransfer, index);
+            }, this)
         });
     };
 
@@ -273,7 +287,7 @@ define([
         },
 
         tabs: [],
-        template: _.template('<ul class="nav nav-tabs <%= placement %>" />'),
+        template: _.template('<ul id="statusbar_bottom" class="nav nav-tabs <%= placement %>"/>'),
         selectTabs: [],
 
         initialize : function (options) {
@@ -301,6 +315,7 @@ define([
                     event.preventDefault(); // Necessary. Allows us to drop.
                 }
                 event.dataTransfer.dropEffect = 'move';
+                this.tabs[this.tabs.length - 1].$el.addClass('mousemove right');
                 return false;
             }, this));
 

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -238,7 +238,7 @@ define([
                     }
                 }).on('dragover', function(e) {
                     var event = e.originalEvent;
-                    if (event.target && $(event.target).closest('#editor_sdk').length<1 ) {
+                    if (event.target && $(event.target).closest('#editor_sdk').length<1 && $(event.target).closest('#statusbar_bottom').length<1) {
                         event.preventDefault();
                         event.dataTransfer.dropEffect ="none";
                         return false;

apps/spreadsheeteditor/main/app/view/Statusbar.js

@@ -201,11 +201,19 @@ define([
                         }
 
                     }, this),
-                    'tab:drag'          : _.bind(function (selectTabs) {
+                    'tab:dragstart'          : _.bind(function (dataTransfer, selectTabs) {
-
+                        var tabs = selectTabs,
+                            arr = [];
+                        tabs.forEach(function (item) {
+                            arr.push(item.sheetindex);
+                        });
+                        dataTransfer.setData("onlyoffice", this.api.asc_StartMoveSheet(arr[0]));
+                        dataTransfer.setData("name", this.api.asc_getWorksheetName(selectTabs[0].sheetindex));
                     }, this),
-                    'tab:drop'          : _.bind(function (selectTabs) {
+                    'tab:drop'          : _.bind(function (dataTransfer, index) {
-
+                        var data = dataTransfer.getData("onlyoffice"),
+                            name = dataTransfer.getData("name");
+                        this.api.asc_EndMoveSheet(data, index, name);
                     }, this)
                 });
 
@@ -332,6 +340,7 @@ define([
                         locked = me.api.asc_isWorksheetLockedOrDeleted(i);
                         tab = {
                             sheetindex    : i,
+                            index         : items.length,
                             active        : sindex == i,
                             label         : me.api.asc_getWorksheetName(i),
 //                          reorderable   : !locked,