Add support for drag & drop buttons

src/commands/view/InsertCustom.js

@@ -34,7 +34,9 @@ define(['backbone', './SelectPosition'],
 				this.removePositionPlaceholder();
 				var object 	= this.buildContent();
 				this.beforeInsert(object);
+				// By default, collections do not trigger add event, so silent is used
 				var model = this.posTargetCollection.add(object, { at: this.posIndex, silent:false });
+
 				if(this.opt.terminateAfterInsert && this.sender)
 					this.sender.set('active',false);
 				else

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		: [{
@@ -57,6 +57,7 @@ require(['config/require-config'], function() {
 					      				   { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
 				      				   ]
 			},
+
 /*
 			panels: {
 				defaults		: [{
@@ -66,6 +67,22 @@ require(['config/require-config'], function() {
 						className	: 'fa fa fa-mouse-pointer',
 						command		: 'select-comp',
 					},{
+            id: 'image-comp',
+            className: 'fa fa-picture-o',
+            dragDrop: 1,
+            options:  {
+              content: '<div style="width:100%; padding:7px">'+
+                          '<div class="redbg" style="width:33.333%; min-height:75px; padding:7px; float:left"></div>' +
+                          '<div style="width:33.333%; min-height:75px; padding:7px; float:left"></div>' +
+                          '<div style="width:33.333%; min-height:75px; padding:7px; float:left"></div>' +
+                          '<div style="clear:both"></div>' +
+                        '</div>'
+            },
+          },{
+            id: 'move-comp',
+            command: 'move-comp',
+            className: 'fa fa-arrows',
+          },{
 								id				: 'create',
 								className	: 'fa fa-plus-square-o icon-add-comp',
 								command		: 'create-comp',
@@ -129,6 +146,7 @@ require(['config/require-config'], function() {
 					       	   { id: 'open-layers', className: 'fa fa-bars', 		command: 'open-layers',	attributes	: { title: 'Open Layer Manager' }, },],
 				}],
 			},
+
 */
 
 			styleManager : {

src/editor/model/Editor.js

@@ -356,6 +356,7 @@ define([
 			initPanels: function() {
 				var cfg = this.config.panels,
 					pfx = cfg.stylePrefix || 'pn-';
+				cfg.pStylePrefix = this.config.stylePrefix;
 				cfg.stylePrefix = this.config.stylePrefix + pfx;
 				cfg.em = this;
 				this.pn = new Panels(cfg);

src/panels/model/Button.js

@@ -12,7 +12,9 @@ define([ 'backbone','require'],
 			context: '',
 			buttons: [],
 			attributes: {},
+			options: {},
 			active: false,
+			dragDrop: false,
 		},
 
 		initialize: function(options) {

src/panels/view/ButtonView.js

@@ -5,16 +5,15 @@ function(Backbone, require) {
 	 * */
 	return Backbone.View.extend({
 
-		tagName		: 'span',
+		tagName: 'span',
-
-		events		: { 'click'	: 'clicked'	},
 
 		initialize: function(o){
-			_.bindAll(this, 'startTimer', 'stopTimer', 'showButtons', 'hideButtons','closeOnKeyPress');
+			_.bindAll(this, 'startTimer', 'stopTimer', 'showButtons', 'hideButtons','closeOnKeyPress','onDrop');
 			var cls = this.model.get('className');
 			this.config = o.config || {};
 			this.em = this.config.em || {};
 			this.pfx = this.config.stylePrefix || '';
+			this.ppfx = this.config.pStylePrefix || '';
 			this.id = this.pfx + this.model.get('id');
 			this.activeCls = this.pfx + 'active';
 			this.btnsVisCls = this.pfx + 'visible';
@@ -33,6 +32,52 @@ function(Backbone, require) {
 
 			if(this.em && this.em.get)
 				this.commands	= this.em.get('Commands');
+
+			this.events = {};
+
+			if(this.model.get('dragDrop'))
+				this.events.mousedown = 'initDrag';
+			else
+				this.events.click = 'clicked';
+			this.delegateEvents();
+
+			this.canvasEl = this.em.Canvas.CanvasView.$el.get(0);
+
+			this.sorter = new this.em.Utils.Sorter({
+				container: this.canvasEl,
+				containerSel: '*',
+				itemSel: '*',
+				pfx: this.ppfx,
+				onMove: this.onDrag,
+				onEndMove: this.onDrop,
+				direction: 'auto',
+				nested: 1,
+			});
+		},
+
+		/**
+		 * Init dragging element
+		 * @private
+		 */
+		initDrag: function(){
+			this.model.collection.deactivateAll(this.model.get('context'));
+			this.sorter.startSort(this.el);
+			this.sorter.setDropContent(this.model.get('options').content);
+			this.canvasEl.style.cursor = 'grabbing';
+		},
+
+		/**
+		 * During drag method
+		 * @private
+		 */
+		onDrag: function(e){},
+
+		/**
+		 * During drag method
+		 * @private
+		 */
+		onDrop: function(e){
+			this.canvasEl.style.cursor = 'default';
 		},
 
 		/**

src/utils/Sorter.js

@@ -20,6 +20,16 @@ define(['backbone'],
         this.pfx = o.pfx || '';
         this.onEndMove = o.onEndMove || '';
         this.direction = o.direction || 'v'; // v (vertical), h (horizontal), a (auto)
+        this.onMoveClb = o.onMove || '';
+        this.dropContent = '';
+      },
+
+      /**
+       * Set content to drop
+       * @param {String|Object} content
+       */
+      setDropContent: function(content){
+        this.dropContent = content;
       },
 
       /**
@@ -135,7 +145,8 @@ define(['backbone'],
           this.lastPos = pos;
         }
 
-        //callback onMove
+        if(typeof this.onMoveClb === 'function')
+          this.onMoveClb(e);
       },
 
       /**
@@ -227,6 +238,7 @@ define(['backbone'],
             case 'block':
             case 'list-item':
             case 'table':
+            case 'flex':
                 return true;
         }
         return;
@@ -430,7 +442,6 @@ define(['backbone'],
       move: function(dst, src, pos){
         var index = pos.index;
         var model = $(src).data('model');
-        var collection = model.collection;
         var $dst = $(dst);
         var targetCollection = $dst.data('collection');
         var targetModel = $dst.data('model');
@@ -438,10 +449,21 @@ define(['backbone'],
 
         if(targetCollection && droppable){ // TODO && targetModel.get('droppable')
           index = pos.method === 'after' ? index + 1 : index;
-          var modelTemp = targetCollection.add({}, {at: index, noIncrement: 1});
+          var modelToDrop, modelTemp;
-          var modelRemoved = model.collection.remove(model);
+          var opts = {at: index, noIncrement: 1};
-          targetCollection.add(modelRemoved, {at: index, noIncrement: 1});
+          if(!this.dropContent){
-          targetCollection.remove(modelTemp);
+            modelTemp = targetCollection.add({}, opts);
+            modelToDrop = model.collection.remove(model);
+          }else{
+            modelToDrop = this.dropContent;
+            opts.silent = false;
+          }
+          targetCollection.add(modelToDrop, opts);
+          if(!this.dropContent){
+            targetCollection.remove(modelTemp);
+          }else{
+            this.dropContent = null;
+          }
           // This will cause to recalculate children dimensions
           this.prevTarget = null;
         }else