diff --git a/src/block_manager/view/BlockView.js b/src/block_manager/view/BlockView.js index 9d1949227..af870b37d 100644 --- a/src/block_manager/view/BlockView.js +++ b/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() { diff --git a/src/block_manager/view/BlocksView.js b/src/block_manager/view/BlocksView.js index 7462b3704..b069daf4b 100644 --- a/src/block_manager/view/BlocksView.js +++ b/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 = ''; }, /** diff --git a/src/editor/config/config.js b/src/editor/config/config.js index e0c3fdb92..0003fe054 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -106,11 +106,11 @@ define(function () { },{ id: 'b2', label: '♥ Block2', - content: '

Block 2

', + content: '

Block 2

', },{ id: 'b3', label: 'Block3', - content: '

Block 3

', + content: '

Block 3

', }], }, diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index ce1b8bc09..5102cf966 100644 --- a/src/editor/model/Editor.js +++ b/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); }, diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index c907f5560..01b250593 100644 --- a/src/utils/Sorter.js +++ b/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(); }, /**