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: '