[SSE] Move sheet: drag and drop

This commit is contained in:
Julia Svinareva 2020-01-13 11:36:22 +03:00
parent 45b7b71a0a
commit d8e1f30847
4 changed files with 32 additions and 7 deletions

View file

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

View file

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

View file

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

View file

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