diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index b8c929555..32b482161 100644 --- a/src/commands/view/MoveComponent.js +++ b/src/commands/view/MoveComponent.js @@ -37,12 +37,13 @@ define(['backbone', './SelectComponent','./SelectPosition'], * */ initSorter: function(e){ var el = $(e.target).data('model'); - if(!el.get('draggable')) + var drag = el.get('draggable'); + if(!drag) return; // Avoid badge showing on move this.cacheEl = null; this.startSelectPosition(e.target, this.frameEl.contentDocument); - console.log(el.get('draggable')); + this.sorter.draggable = drag; this.sorter.onEndMove = this.onEndMove.bind(this); this.stopSelectComponent(); this.$wrapper.off('mousedown', this.initSorter); diff --git a/src/dom_components/model/ComponentTable.js b/src/dom_components/model/ComponentTable.js index eb965c857..5c94267f1 100644 --- a/src/dom_components/model/ComponentTable.js +++ b/src/dom_components/model/ComponentTable.js @@ -1,10 +1,11 @@ -define(['./ComponentText'], +define(['./Component'], function (Component) { return Component.extend({ defaults: _.extend({}, Component.prototype.defaults, { tagName: 'table', + droppable: ['tr', 'tbody', 'thead', 'tfoot'], columns: 3, rows: 2, traits: [{ diff --git a/src/dom_components/model/ComponentTableCell.js b/src/dom_components/model/ComponentTableCell.js index 28e2ee349..93200da0c 100644 --- a/src/dom_components/model/ComponentTableCell.js +++ b/src/dom_components/model/ComponentTableCell.js @@ -19,8 +19,12 @@ define(['./Component'], */ isComponent: function(el) { var result = ''; - if(el.tagName == 'TD'){ - result = {type: 'cell'}; + var tag = el.tagName; + if(tag == 'TD' || tag == 'TH'){ + result = { + type: 'cell', + tagName: tag.toLowerCase() + }; } return result; }, diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 381cbc931..31c33b2c9 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -199,6 +199,8 @@ define(function () { attributes: {class:'fa fa-table'}, content: { type: 'table', + columns: 3, + rows: 5, style: {height: '150px', width: '100%'} }, },{ diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index a0140275e..30426efe4 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -15,6 +15,7 @@ define(['backbone'], this.$el = $(this.el); this.containerSel = o.containerSel || 'div'; this.itemSel = o.itemSel || 'div'; + this.draggable = o.draggable || true; this.nested = o.nested || 0; this.pfx = o.pfx || ''; this.freezeClass = o.freezeClass || this.pfx + 'freezed'; @@ -241,6 +242,10 @@ define(['backbone'], default: return; } + switch (el.tagName) { + case 'TR': + return true; + } switch ($el.css('display')) { case 'block': case 'list-item': @@ -261,9 +266,17 @@ define(['backbone'], dimsFromTarget: function(target, rX, rY){ var dims = []; + // Select the first valuable target + // TODO: avoid this check for every standard component, + // which generally is ok if(!this.matches(target, this.itemSel + ',' + this.containerSel)) target = this.closest(target, this.itemSel); + // If draggable is an array the target will be one of those + if(this.draggable instanceof Array){ + target = this.closest(target, this.draggable.join(',')); + } + if(!target) return dims;