[SSE] Move sheet: drag and drop
This commit is contained in:
parent
45b7b71a0a
commit
d8e1f30847
|
@ -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);
|
||||
|
|
|
@ -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));
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue