Fix sorter for layers

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>GrapesJS</title>
     <link rel="stylesheet" href="dist/css/grapes.min.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <script src="dist/grapes.min.js"></script>
 
   </head>

src/style_manager/model/Layers.js

@@ -18,6 +18,6 @@ module.exports = Backbone.Collection.extend({
 
   onReset() {
     this.idx = 1;
-  },
+  }
 
 });

src/style_manager/view/LayerView.js

@@ -19,21 +19,26 @@ module.exports = Backbone.View.extend({
   <div style="clear:both"></div>`),
 
   initialize(o) {
+    let model = this.model;
     this.stackModel = o.stackModel || {};
     this.config = o.config || {};
     this.pfx = this.config.stylePrefix || '';
     this.className = this.pfx + 'layer';
     this.sorter = o.sorter || null;
-    this.listenTo(this.model, 'destroy remove', this.remove);
-    this.listenTo(this.model, 'change:value', this.valueChanged);
-    this.listenTo(this.model, 'change:props', this.showProps);
+    this.listenTo(model, 'destroy remove', this.remove);
+    this.listenTo(model, 'change:value', this.valueChanged);
+    this.listenTo(model, 'change:props', this.showProps);
     this.events['click #' + this.pfx + 'close-layer'] = 'remove';
     this.events['mousedown > #' + this.pfx + 'move'] = 'initSorter';
 
-    if( !this.model.get('preview') ){
+    if (!model.get('preview')) {
       this.$el.addClass(this.pfx + 'no-preview');
     }
-    this.$el.data('model', this.model);
+
+    // For the sorter
+    model.view = this;
+    model.set({droppable: 0, draggable: 1});
+    this.$el.data('model', model);
     this.delegateEvents();
   },
 

src/style_manager/view/LayersView.js

@@ -9,23 +9,29 @@ module.exports = Backbone.View.extend({
     this.preview = o.preview;
     this.pfx = this.config.stylePrefix || '';
     this.ppfx = this.config.pStylePrefix || '';
-    this.className  = this.pfx + 'layers ' + this.ppfx + 'field';
-    this.listenTo( this.collection, 'add', this.addTo);
-    this.listenTo( this.collection, 'deselectAll', this.deselectAll );
-    this.listenTo( this.collection, 'reset', this.render);
+    let pfx = this.pfx;
+    let ppfx = this.ppfx;
+    let collection = this.collection;
+    this.className = `${pfx}layers ${ppfx}field`;
+    this.listenTo(collection, 'add', this.addTo);
+    this.listenTo(collection, 'deselectAll', this.deselectAll );
+    this.listenTo(collection, 'reset', this.render);
 
     var em = this.config.em || '';
     var utils = em ? em.get('Utils') : '';
 
     this.sorter = utils ? new utils.Sorter({
       container: this.el,
-      containerSel: '.' + this.pfx + 'layers',
-      itemSel: '.' + this.pfx + 'layer',
+      ignoreViewChildren: 1,
+      containerSel: `.${pfx}layers`,
+      itemSel: `.${pfx}layer`,
       pfx: this.config.pStylePrefix,
     }) : '';
 
-    this.$el.data('model', {});
-    this.$el.data('collection', this.collection);
+    // For the Sorter
+    collection.view = this;
+    this.$el.data('model', collection);
+    this.$el.data('collection', collection);
   },
 
   /**

src/utils/Sorter.js

@@ -27,6 +27,7 @@ module.exports = Backbone.View.extend({
     this.onMoveClb = o.onMove || '';
     this.relative = o.relative || 0;
     this.ignoreViewChildren = o.ignoreViewChildren || 0;
+    this.ignoreModels = o.ignoreModels || 0;
     this.plh = o.placer || '';
     // Frame offset
     this.wmargin = o.wmargin || 0;
@@ -299,6 +300,10 @@ module.exports = Backbone.View.extend({
    * @param  {Model|null} model
    */
   selectTargetModel(model) {
+    if (model instanceof Backbone.Collection) {
+      return;
+    }
+
     var prevModel = this.targetModel;
     if (prevModel) {
       prevModel.set('status', '');
@@ -449,6 +454,7 @@ module.exports = Backbone.View.extend({
 
     // Check if the target could accept the source
     let droppable = trgModel.get('droppable');
+    droppable = droppable instanceof Backbone.Collection ? 1 : droppable;
     droppable = droppable instanceof Array ? droppable.join(', ') : droppable;
     result.dropInfo = droppable;
     droppable = typeof droppable === 'string' ? src.matches(droppable) : droppable;
@@ -502,7 +508,8 @@ module.exports = Backbone.View.extend({
       this.targetP = this.closest(target, this.containerSel);
 
       // Check if the source is valid with the target
-      if (!this.validTarget(target).valid) {
+      let validResult = this.validTarget(target);
+      if (!validResult.valid && this.targetP) {
         return this.dimsFromTarget(this.targetP, rX, rY);
       }
 
@@ -510,7 +517,6 @@ module.exports = Backbone.View.extend({
       this.prevTargetDim = this.getDim(target);
       this.cacheDimsP = this.getChildrenDim(this.targetP);
       this.cacheDims = this.getChildrenDim(target);
-      //console.log('dims', this.cacheDims, target);
     }
 
     // If the target is the previous one will return the cached dims
@@ -519,6 +525,7 @@ module.exports = Backbone.View.extend({
 
     // Target when I will drop element to sort
     this.target = this.prevTarget;
+
     // Generally also on every new target the poiner enters near
     // to borders, so have to to check always
     if(this.nearBorders(this.prevTargetDim, rX, rY) ||
@@ -526,6 +533,7 @@ module.exports = Backbone.View.extend({
       dims = this.cacheDimsP;
       this.target = this.targetP;
     }
+
     this.lastPos = null;
     return dims;
   },
@@ -780,14 +788,15 @@ module.exports = Backbone.View.extend({
     var warns = [];
     var index = pos.index;
     var modelToDrop, modelTemp, created;
-    var validTarget = this.validTarget(dst);
+    var validResult = this.validTarget(dst);
     var targetCollection = $(dst).data('collection');
-    var model = validTarget.srcModel;
-    var droppable = validTarget.droppable;
-    var draggable = validTarget.draggable;
-    var dropInfo = validTarget.dropInfo;
-    var dragInfo = validTarget.dragInfo;
+    var model = validResult.srcModel;
+    var droppable = validResult.droppable;
+    var draggable = validResult.draggable;
+    var dropInfo = validResult.dropInfo;
+    var dragInfo = validResult.dragInfo;
     var dropContent = this.dropContent;
+    droppable = validResult.trgModel instanceof Backbone.Collection ? 1 : droppable;
 
     if (targetCollection && droppable && draggable) {
       index = pos.method === 'after' ? index + 1 : index;