Fix move command

src/commands/view/MoveComponent.js

@@ -28,6 +28,9 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			 * @param	{Event} e
 			 * */
 			initSorter: function(e){
+				var el = $(e.target).get('model');
+				if(!el.get('draggable'))
+					return;
 				if(this.sorter)
 					this.sorter.startSort(e.target);
 				this.stopSelectComponent(e);
@@ -50,7 +53,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 				e.stopPropagation();
 
 			  var $this 	= $(e.target);
-			  if($this.data('model').get('movable')){
+			  if($this.data('model').get('draggable')){
 					 $this.addClass(this.hoverClass);
 					 this.attachBadge(e.target);
 			    }

src/demo.js

@@ -9,7 +9,7 @@ require(['config/require-config'], function() {
 			container	: '#gjs',
 			height: '100%',
 			fromElement: true,
-			storage:{ autoload: 0 },
+			//storage:{ autoload: 0 },
 
 			commands: 		{
 					defaults		: [{

src/dom_components/config/config.js

@@ -9,7 +9,7 @@ define(function () {
 			removable : false,
 			copyable	: false,
 			stylable	: ['background','background-color','background-image', 'background-repeat','background-attachment','background-position'],
-			movable		: false,
+			draggable	: false,
 			badgable	: false,
 			components: [],
 		},

src/dom_components/main.js

@@ -132,7 +132,7 @@ define(function(require) {
 			 * @param {string} [component.tagName='div'] Tag name
 			 * @param {string} [component.type=''] Type of the component. Available: ''(default), 'text', 'image'
 			 * @param {boolean} [component.removable=true] If component is removable
-			 * @param {boolean} [component.movable=true] If is possible to move the component around the structure
+			 * @param {boolean} [component.draggable=true] If is possible to move the component around the structure
 			 * @param {boolean} [component.droppable=true] If is possible to drop inside other components
 			 * @param {boolean} [component.badgable=true] If the badge is visible when the component is selected
 			 * @param {boolean} [component.stylable=true] If is possible to style component
@@ -146,7 +146,7 @@ define(function(require) {
 			 * var comp1 = ComponentsService.addComponent({
 			 * 	tagName: 'div',
 			 * 	removable: true, // Can't remove it
-			 * 	movable: true, // Can't move it
+			 * 	draggable: true, // Can't move it
 			 * 	copyable: true, // Disable copy/past
 			 * 	content: 'Content text', // Text inside component
 			 * 	style: { color: 'red'},

src/dom_components/model/Component.js

@@ -8,7 +8,7 @@ define(['backbone','./Components', 'ClassManager/model/ClassTags'],
 				type: '',
 				editable: false,
 				removable: true,
-				movable: true,
+				draggable: true,
 				droppable: true,
 				badgable: true,
 				stylable: true,

src/navigator/view/ItemSort.js

@@ -1,10 +1,10 @@
 define(['backbone'],
 	function(Backbone) {
-		/** 
+		/**
 		 * @class ItemSort
 		 * */
 		return Backbone.View.extend({
-			
+
 			initialize: function(o) {
 				_.bindAll(this,'startMove','onMove','endMove','rollback', 'itemLeft');
 				this.config		= o.config || {};
@@ -13,12 +13,12 @@ define(['backbone'],
 				this.itemsClass	= '.' + this.pfx + this.config.itemsClass;
 				this.setElement('.'+this.pfx+this.config.containerId);
 			},
-			
+
-			/** 
+			/**
 			 * Picking component to move
 			 * @param {Object}	Element view
 			 * @param {Object}	Event
-			 * 
+			 *
 			 * @return void
 			 * */
 			startMove: function(eV, e){
@@ -26,20 +26,20 @@ define(['backbone'],
 				this.eV			= eV;
 				this.$sel		= this.eV.$el;
 				this.$selParent	= this.$sel.closest(this.itemsClass);
-				
+
-				// In case the component selected is not movable
+				// In case the component selected is not draggable
-				if( !eV.model.get('movable') )
+				if( !eV.model.get('draggable') )
 					return;
-				
+
 				// Create placeholder if not exists
 				if(!this.$plh){
 					var pfx		= this.pfx;
 					this.$plh 	=  $('<div>', {id: pfx + 'placeholder'}).css({'pointer-events':'none'}).hide();
 					this.$plh.append( $('<div>', {id: pfx + "plh-int", class: pfx + 'insert'} ) );
-					
+
 					if(!this.$el.length)
 						this.$el	= $('.'+this.pfx+this.config.containerId);
-					
+
 					this.$plh.appendTo(this.$el);
 				}
 				this.$plh.data('hide',1);
@@ -48,11 +48,11 @@ define(['backbone'],
 				$(document).on('mouseup',this.endMove);
 				$(document).on('keypress',this.rollback);
 			},
-			
+
 			/**
 			 * Get children dimensions
 			 * @param	{Object}	Parent element
-			 * 
+			 *
 			 * @retun	{Array}
 			 * */
 			getChildrenDim: function(el){
@@ -68,16 +68,16 @@ define(['backbone'],
 				});
 				return dim;
 			},
-			
+
-			/** 
+			/**
 			 * During move
-			 * @param {Object} Event 
+			 * @param {Object} Event
-			 * 
+			 *
 			 * @return void
 			 * */
 			onMove: function(e){
 				this.moved 		= true;
-				
+
 				if(this.$plh.data('hide')){
 					this.$plh.show();
 					this.$plh.data('hide',0);
@@ -90,17 +90,17 @@ define(['backbone'],
 				this.inspect(e);
 				this.updatePosition(this.rX, this.rY);
 				var actualPos 	= this.posIndex+':'+this.posMethod;
-				
+
 				//If there is a significant changes with the pointer
-				if(!this.lastPos || (this.lastPos != actualPos)){								
+				if(!this.lastPos || (this.lastPos != actualPos)){
 					this.updatePlaceholderPos(this.posIndex, this.posMethod);
 					this.lastPos	= this.posIndex+':'+this.posMethod;
 				}
 				//Working alternative for find taget element
 				//var $targetEl = this.$selParent.children('.'+this.pfx+this.config.itemClass).eq(this.aIndex);
 			},
-			
+
-			/** 
+			/**
 			 * Search where to put placeholder
 			 * @param int X position of the mouse
 			 * @param int Y position of the mouse
@@ -108,7 +108,7 @@ define(['backbone'],
 			 * */
 			updatePosition: function( posX, posY ){
 				this.posMethod = "before";
-				this.posIndex = 0;				
+				this.posIndex = 0;
 				var leftLimit = 0, xLimit = 0, dimRight = 0, yLimit = 0, xCenter = 0, yCenter = 0, dimDown = 0, dim = 0;
 				for(var i = 0; i < this.cDim.length; i++){											//Dim => t,l,h,w
 					dim = this.cDim[i];
@@ -120,7 +120,7 @@ define(['backbone'],
 						(leftLimit && dimRight < leftLimit))										//No need with this one if over the limit
 							continue;
 					if(!dim[4]){																	//If it's not inFlow (like float element)
-						if( posY < dimDown)	
+						if( posY < dimDown)
 							yLimit = dimDown;
 						if( posX < xCenter){														//If mouse lefter than center
 							xLimit = xCenter;
@@ -142,8 +142,8 @@ define(['backbone'],
 					}
 				}
 			},
-			
+
-			/** 
+			/**
 			 * Updates the position of the placeholder
 			 * @param int Index of the nearest child
 			 * @param str Before or after position
@@ -157,7 +157,7 @@ define(['backbone'],
 				if( this.cDim[index] ){
 					var elDim	= this.cDim[index];
 					//If it's like with 'float' style
-					if(!elDim[4]){																			
+					if(!elDim[4]){
 						w		= 'auto';
 						h		= elDim[2] - (marg * 2) + un;
 						t		= elDim[0] + marg;
@@ -185,11 +185,11 @@ define(['backbone'],
 				if(h)
 					plh.style.height	= h;
 			},
-			
+
-			/** 
+			/**
 			 * Leave item
 			 * @param event
-			 * 
+			 *
 			 * @return void
 			 * */
 			endMove: function(e){
@@ -202,14 +202,14 @@ define(['backbone'],
 					this.move(this.$targetEl, this.$sel, this.posIndex, this.posMethod);
 				this.itemLeft();
 			},
-			
+
-			/** 
+			/**
 			 * Move component to new position
 			 * @param	{Object} 	Component to move
 			 * @param	{Object} 	Target component
 			 * @param 	{Integer} 	Indicates the position inside the collection
 			 * @param 	{String} 	Before of after component
-			 * 
+			 *
 			 * @return void
 			 * */
 			move: function(target, el, posIndex, method){
@@ -222,10 +222,10 @@ define(['backbone'],
 				var collection 			= model.collection;
 				var targetModel 		= trg.data('model');
 				var targetCollection	= targetModel.collection;
-				
+
 				if(!this.cDim.length)
 					targetCollection	= targetModel.get('components');
-				
+
 				if(targetCollection && targetModel.get('droppable')){
 					index				= method == 'after' ? index + 1 : index;
 					var modelTemp 		= targetCollection.add({style:{}}, { at: index});
@@ -235,11 +235,11 @@ define(['backbone'],
 				}else
 					console.warn("Invalid target position");
 			},
-			
+
-			/** 
+			/**
 			 * Track inside which element pointer entered
 			 * @param event
-			 * 
+			 *
 			 * @return void
 			 * */
 			inspect: function(e){
@@ -269,11 +269,11 @@ define(['backbone'],
 					this.cDim		= [];
 				}
 			},
-			
+
-			/** 
+			/**
 			 * Triggered when pointer leaves item
-			 * @param event 
+			 * @param event
-			 * 
+			 *
 			 * @return void
 			 * */
 			itemLeft: function(e){
@@ -282,11 +282,11 @@ define(['backbone'],
 					this.$targetEl 		= null;
 				}
 			},
-			
+
 			/**
 			 * Returns dimension of the target
 			 * @param Event
-			 * 
+			 *
 			 * @return Array
 			 * */
 			getTargetDim: function(e){
@@ -294,25 +294,25 @@ define(['backbone'],
 					$elO	= $el.offset();
 				return [ $elO.top - this.elT, $elO.left - this.elL, $el.outerHeight(), $el.outerWidth() ];
 			},
-			
+
-			/** 
+			/**
 			 * Check if pointer is near to the borders of the target
-			 * @param event 
+			 * @param event
 			 * @return Bool
 			 * */
 			nearToBorders: function(e){
 				var m = 10;																		//Limit in pixels for be near
 				if(!this.dimT)
-					return; 
+					return;
 				var dimT = this.dimT;
-				if( ((dimT[0] + m) > this.rY) || (this.rY > (dimT[0] + dimT[2] - m)) || 
+				if( ((dimT[0] + m) > this.rY) || (this.rY > (dimT[0] + dimT[2] - m)) ||
 					((dimT[1] + m) > this.rX) || (this.rX > (dimT[1] + dimT[3] - m))  )
 					return 1;
 				else
 					return 0;
 			},
-			
+
-			/** 
+			/**
 			 * Rollback to previous situation
 			 * @param Event
 			 * @param Bool Indicates if rollback in anycase

src/navigator/view/ItemView.js

@@ -196,7 +196,7 @@ define(['backbone', 'text!./../template/item.html','require'],
 			}).render().$el;
 			this.$el.find('.'+ pfx +'children').html(this.$components);
 			this.$caret			= this.$el.find('> .' + pfx + 'title > #' + pfx + 'caret');
-			if(!this.model.get('movable') || !this.config.sortable){
+			if(!this.model.get('draggable') || !this.config.sortable){
 				this.$el.find('> #' + pfx + 'move').detach();
 			}
 			if(!vis)