Add draggable as array property

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

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: [{

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;
 			},

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%'}
 					},
 	      },{

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;