Add drag&drop on blocks

src/block_manager/view/BlockView.js

@@ -3,10 +3,38 @@ function(Backbone) {
 
   return Backbone.View.extend({
 
+    events: {
+      mousedown: 'onDrag'
+    },
+
     initialize: function(o, config) {
+      _.bindAll(this, 'onDrop');
       this.config = config || {};
       this.ppfx = this.config.pStylePrefix || '';
       this.listenTo(this.model, 'destroy', this.remove);
+      this.doc = $(document);
+    },
+
+    /**
+     * Start block dragging
+     * @private
+     */
+    onDrag: function(){
+      if(!this.config.getSorter)
+        return;
+      var sorter = this.config.getSorter();
+      sorter.startSort(this.el);
+      sorter.setDropContent(this.model.get('content'));
+      this.doc.on('mouseup', this.onDrop);
+    },
+
+    /**
+     * Drop block
+     * @private
+     */
+    onDrop: function(){
+      this.doc.off('mouseup', this.onDrop);
+      this.config.getSorter().endMove();
     },
 
     render: function() {

src/block_manager/view/BlocksView.js

@@ -4,9 +4,62 @@ function(Backbone, BlockView) {
   return Backbone.View.extend({
 
     initialize: function(opts, config) {
+      _.bindAll(this, 'getSorter', 'onDrag', 'onDrop');
       this.config = config || {};
       this.ppfx = this.config.pStylePrefix || '';
       this.listenTo(this.collection, 'add', this.addTo);
+      this.em = this.config.em;
+      this.tac = 'test-tac';
+      this.config.getSorter = this.getSorter;
+    },
+
+    /**
+     * Get sorter
+     * @private
+     */
+    getSorter: function(){
+      if(!this.em)
+        return;
+      if(!this.sorter){
+        var utils = this.em.get('Utils');
+        var canvas = this.em.get('Canvas');
+        var sorter = new utils.Sorter({
+          container: canvas.getBody(),
+          placer: canvas.getPlacerEl(),
+          containerSel: '*',
+          itemSel: '*',
+          pfx: this.ppfx,
+          onStart: this.onDrag,
+          onEndMove: this.onDrop,
+          document: canvas.getFrameEl().contentDocument,
+          direction: 'a',
+          wmargin: 1,
+          nested: 1,
+        });
+        var offDim = canvas.getOffset();
+        sorter.offTop = offDim.top;
+        sorter.offLeft = offDim.left;
+        this.sorter = sorter;
+      }
+      return this.sorter;
+    },
+
+    /**
+     * Callback when block is on drag
+     * @private
+     */
+    onDrag: function(){
+      this.em.get('Canvas').getBody().style.cursor = 'grabbing';
+      document.body.style.cursor = 'grabbing';
+    },
+
+    /**
+     * Callback when block is dropped
+     * @private
+     */
+    onDrop: function(){
+      this.em.get('Canvas').getBody().style.cursor = '';
+      document.body.style.cursor = '';
     },
 
     /**

src/editor/config/config.js

@@ -106,11 +106,11 @@ define(function () {
 	      },{
 					id: 'b2',
 	        label: '♥ Block2',
-	        content: '<h1>Block 2</h1>',
+	        content: '<h2>Block 2</h2>',
 	      },{
 					id: 'b3',
 	        label: 'Block3',
-	        content: '<h1>Block 3</h1>',
+	        content: '<h3>Block 3</h3>',
 	      }],
 		},
 

src/editor/model/Editor.js

@@ -65,7 +65,7 @@ define([
 				this.initClassManager();
 				this.initModal();
 				this.initAssetManager();
-				this.initBlockManager();
+				this.initUtils();
 				this.initCodeManager();
 				this.initCommands();
 				this.initPanels();
@@ -74,8 +74,8 @@ define([
 				this.initComponents();
 				this.initCanvas();
 				this.initUndoManager();
-				this.initUtils();
 				this.initStyleManager();
+				this.initBlockManager(); // Requres utils, canvas
 
 				this.on('change:selectedComponent', this.componentSelected, this);
 			},

src/utils/Sorter.js

@@ -18,6 +18,7 @@ define(['backbone'],
         this.nested = o.nested || 0;
         this.pfx = o.pfx || '';
         this.freezeClass = o.freezeClass || this.pfx + 'freezed';
+        this.onStart = o.onStart || '';
         this.onEndMove = o.onEndMove || '';
         this.direction = o.direction || 'v'; // v (vertical), h (horizontal), a (auto)
         this.onMoveClb = o.onMove || '';
@@ -124,6 +125,9 @@ define(['backbone'],
 
         this.$el.on('mousemove',this.onMove);
         $(document).on('keypress',this.rollback);
+
+        if(typeof this.onStart === 'function')
+          this.onStart();
       },
 
       /**