From 45b7b71a0ad79ea9217a647a10ed4040d32b4075 Mon Sep 17 00:00:00 2001
From: Julia Svinareva <julia.svinaryova@onlyoffice.com>
Date: Tue, 24 Dec 2019 10:52:37 +0300
Subject: [PATCH] [SSE] Move sheet: drag and drop

---
 apps/common/main/lib/component/Tab.js    |  2 +-
 apps/common/main/lib/component/TabBar.js | 31 ++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/component/Tab.js b/apps/common/main/lib/component/Tab.js
index 108672047..be04ba493 100644
--- a/apps/common/main/lib/component/Tab.js
+++ b/apps/common/main/lib/component/Tab.js
@@ -52,7 +52,7 @@ define([
         this.label      = 'Tab';
         this.cls        = '';
         this.template   = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">',
-                                            '<a title="<%= label %>"><%- label %></a>',
+                                            '<a title="<%= label %>" draggable="true" oo_editor_input="true" tabindex="-1"><%- label %></a>',
                                         '</li>'].join(''));
 
         this.initialize.call(this, opts);
diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js
index 17406f67c..d0d82bd6a 100644
--- a/apps/common/main/lib/component/TabBar.js
+++ b/apps/common/main/lib/component/TabBar.js
@@ -233,15 +233,32 @@ define([
                 this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs);
             }, this.bar),
             mousedown: $.proxy(function (e) {
-                if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) {
+                /*if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) {
                     if (!tab.isLockTheDrag) {
                         if (!e.ctrlKey && !e.metaKey && !e.shiftKey)
                             tab.changeState();
                         dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs);
                     }
-                }
+                }*/
+                this.bar.trigger('tab:drag', this.bar.selectTabs);
             }, this)
         });
+        tab.$el.children().on(
+            {dragstart: $.proxy(function (e) {
+                var event = e.originalEvent,
+                    img = document.createElement('div');
+                event.dataTransfer.setDragImage(img, 0, 0);
+                event.dataTransfer.effectAllowed = 'move';
+            }, this),
+            dragover: $.proxy(function (e) {
+                var event = e.originalEvent;
+                if (event.preventDefault) {
+                    event.preventDefault(); // Necessary. Allows us to drop.
+                }
+                event.dataTransfer.dropEffect = 'move';
+                return false;
+            }, this),
+        });
     };
 
     StateManager.prototype.detach = function (tab) {
@@ -276,6 +293,16 @@ define([
 
             var eventname=(/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
             addEvent(this.$bar[0], eventname, _.bind(this._onMouseWheel,this));
+            addEvent(this.$bar[0], 'dragstart', _.bind(function (event) {
+                event.dataTransfer.effectAllowed = 'move';
+            }, this));
+            addEvent(this.$bar[0], 'dragover', _.bind(function (event) {
+                if (event.preventDefault) {
+                    event.preventDefault(); // Necessary. Allows us to drop.
+                }
+                event.dataTransfer.dropEffect = 'move';
+                return false;
+            }, this));
 
             this.manager = new StateManager({bar: this});