Fix block grabbing issue

src/block_manager/view/BlocksView.js

@@ -10,6 +10,7 @@ function(Backbone, BlockView) {
       this.listenTo(this.collection, 'add', this.addTo);
       this.em = this.config.em;
       this.tac = 'test-tac';
+      this.grabbingCls = this.ppfx + 'grabbing';
 
       if(this.em){
         this.config.getSorter = this.getSorter;
@@ -61,8 +62,10 @@ function(Backbone, BlockView) {
      */
     onDrag: function(){
       this.em.stopDefault();
-      this.em.get('Canvas').getBody().style.cursor = 'grabbing';
-      document.body.style.cursor = 'grabbing';
+      //this.em.get('Canvas').getBody().style.cursor = 'grabbing';
+      //document.body.style.cursor = 'grabbing';
+      this.em.get('Canvas').getBody().className += ' ' + this.grabbingCls;
+      document.body.className += ' ' + this.grabbingCls;
     },
 
     dragHelper: function(el){
@@ -84,9 +87,12 @@ function(Backbone, BlockView) {
      */
     onDrop: function(model){
       this.em.runDefault();
-      this.em.get('Canvas').getBody().style.cursor = '';
-      document.body.style.cursor = '';
-      if(model && model.get && model.get('activeOnRender')){
+      var bodyCanvas = this.em.get('Canvas').getBody();
+      var body = document.body;
+      bodyCanvas.className = bodyCanvas.className.replace(this.grabbingCls, '');
+      body.className = body.className.replace(this.grabbingCls, '');
+
+      if (model && model.get && model.get('activeOnRender')) {
         model.trigger('active');
         model.set('activeOnRender', 0);
       }

src/canvas/view/CanvasView.js

@@ -49,6 +49,7 @@ function(Backbone, FrameView) {
                        '.' + ppfx + 'freezed{opacity: 0.5; pointer-events: none}' +
 											 '.' + ppfx + 'no-pointer{pointer-events: none}' +
                        '.' + ppfx + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}' +
+											 '.' + ppfx + 'grabbing{cursor: grabbing; cursor: -webkit-grabbing}' +
 											 '* ::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.1)}' +
 											 '* ::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.2)}' +
 											 '* ::-webkit-scrollbar {width: 10px}' +

src/utils/Sorter.js

@@ -30,6 +30,7 @@ define(['backbone'],
         this.offTop = o.offsetTop || 0;
         this.offLeft = o.offsetLeft || 0;
         this.document = o.document || document;
+        this.$document = $(this.document);
         this.dropContent = '';
         this.helper = '';
         this.em = o.em || '';
@@ -130,14 +131,14 @@ define(['backbone'],
           this.eV = this.closest(trg, this.itemSel);
 
         // Create placeholder if not exists
-        if(!this.plh){
+        if(!this.plh) {
           this.plh = this.createPlaceholder();
           this.el.appendChild(this.plh);
         }
 
-        if(this.eV){
+        if(this.eV) {
           this.eV.className += ' ' + this.freezeClass;
-          $(this.document).on('mouseup',this.endMove);
+          this.$document.on('mouseup', this.endMove);
         }
 
         if(this.helper){
@@ -146,8 +147,9 @@ define(['backbone'],
           document.body.appendChild(this.helperEl);
         }
 
-        this.$el.on('mousemove',this.onMove);
-        $(document).on('keypress',this.rollback);
+        this.$el.on('mousemove', this.onMove);
+        $(document).on('keydown', this.rollback);
+        this.$document.on('keydown', this.rollback);
 
         if(typeof this.onStart === 'function')
           this.onStart();
@@ -157,7 +159,7 @@ define(['backbone'],
        * During move
        * @param {Event} e
        * */
-      onMove: function(e){
+      onMove: function(e) {
         this.moved = 1;
 
         // Turn placeholder visibile
@@ -491,8 +493,8 @@ define(['backbone'],
       endMove: function(e){
         var created;
         this.$el.off('mousemove', this.onMove);
-        $(this.document).off('mouseup', this.endMove);
-        $(this.document).off('keypress', this.rollback);
+        this.$document.off('mouseup', this.endMove);
+        this.$document.off('keydown', this.rollback);
         this.plh.style.display = 'none';
         var clsReg = new RegExp('(?:^|\\s)'+this.freezeClass+'(?!\\S)', 'gi');
         if(this.eV)
@@ -570,10 +572,12 @@ define(['backbone'],
        * @param {Event}
        * @param {Bool} Indicates if rollback in anycase
        * */
-      rollback: function(e){
-        $(document).off('keypress',this.rollback);
+      rollback: function(e) {
+        $(document).off('keydown', this.rollback);
+        this.$document.off('keydown', this.rollback);
         var key = e.which || e.keyCode;
-        if(key == 27){
+
+        if (key == 27) {
           this.moved = false;
           this.endMove();
         }

styles/css/main.css

@@ -2655,6 +2655,10 @@ $fontColorActive: #4f8ef7;
   z-index: 10;
   width: auto; }
 
+.gjs-grabbing {
+  cursor: grabbing;
+  cursor: -webkit-grabbing; }
+
 .gjs-off-prv {
   position: relative;
   z-index: 10;
@@ -3698,12 +3702,19 @@ ol.example li.placeholder:before {
   box-sizing: border-box;
   height: 90px;
   cursor: all-scroll;
-  margin: 2.5%;
   font-size: 11px;
   font-weight: lighter;
   display: flex;
   flex-direction: column;
-  justify-content: flex-end; }
+  justify-content: flex-end;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  margin: 10px 2.5% 5px;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+  transition: all 0.2s ease 0s;
+  transition-property: box-shadow, color; }
+  .gjs-block:hover {
+    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); }
 
 .gjs-block.fa {
   font-size: 2em;

styles/scss/main.scss

@@ -147,12 +147,17 @@ $fontV: 20;//random(1000)
   color: $fontColorActive;
 }
 
-.#{$app-prefix}bdrag{
+.#{$app-prefix}bdrag {
   position: absolute;
   z-index: 10;
   width: auto;
 }
 
+.#{$app-prefix}grabbing {
+  cursor: grabbing;
+  cursor: -webkit-grabbing;
+}
+
 .#{$app-prefix}off-prv{
   @extend .#{$app-prefix}color-main;
   @extend .#{$app-prefix}bg-main;
@@ -162,6 +167,7 @@ $fontV: 20;//random(1000)
   cursor: pointer;
 }
 
+// Custom scrollbars for Chrome
 .#{$app-prefix}editor-cont ::-webkit-scrollbar-track {
   background: $mainDklColor;
 }
@@ -1061,24 +1067,34 @@ $lightBorder: rgba(255, 255, 255, 0.05);
 
 /********* Block manager **********/
 
-.#{$app-prefix}blocks-c{
+.#{$app-prefix}blocks-c {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
-.#{$app-prefix}block{
+.#{$app-prefix}block {
   @include user-select(none);
   width: 45%;
   padding: 1em;
   box-sizing: border-box;
   height: 90px;
   cursor:all-scroll;
-  margin: 2.5%;
   font-size: 11px;
   font-weight: lighter;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  margin: 10px 2.5% 5px;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+  transition: all 0.2s ease 0s;
+  transition-property: box-shadow, color;
+
+  &:hover {
+    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
+  }
 }
 
 .#{$app-prefix}block.fa {