Overlap or stamp ?

[PrestaMagician]

HI, Will it be possible to overlap a widget ? So, place a widget over another one like the stamp feature in masonry. Best regards,

[adumesny]

no gridstack is not designed to overlap widgets.

[PrestaMagician]

it's a pity it would add a fantastic possibility to create layouts and page builder.

[adumesny]

feel free to post pictures/link as I'm not familiar with others tools that do it.

[PrestaMagician]

thanks for your reply. You can see sample here: (url) https://masonry.desandro.com/options.html) with the stamp option. Or more explicit with the grids layout builder for wordpress: (url)(https://justevolve.it/grids/)

Perhaps by adding an option with a class. If the grid-stack-item (widget) has a special class, the colision detection is disabled (only for that widget). Like that the widget can to be over others. And we can add a z-index on the widget to order them.

[adumesny]

yeah it would be possible to avoid checking for collision (you could just override the method yourself locally) but would need some way to let user change the z-order. All do-able outside the lib, so I suggest you do that as I don't foresee ever adding that.

But why would you want widgets to overlap - what's the user case here ?

[PrestaMagician]

For a page builder, that feature is a must have. Like that it is possible to place the widget exactly where you want in the grid. How to override the method and what method ? Can you explain ? And in that case, it is necessary to write the Width, Height, Top and Left of the widget in the style attribute, so how to do that ?

[PrestaMagician]

Sorry, if I am not very explicit but I am French and my english is very bad.

[adumesny]

Sorry, if I am not very explicit but I am French and my english is very bad.

that's ok, I'm french too but my English better be good by now that I've lived in the US for 35 years :)

How to override the method and what method ?

see https://github.com/gridstack/gridstack.js#extend-library and the method(s) would be to not do anything here, just like that: GridStackEngine.prototype._fixCollisions = function(node) {} that should let you put things overlapping. z-order you're on your own :) (the grid-stack-item would have each a separate z-index CSS), or use the DOM order by default

[PrestaMagician]

Thanks a lot for your reply. If I update the code of the _fixCollisions like that:

if (collisionNode.locked) {
        // if colliding with a locked item, move ourself instead
        moved = this.moveNode(node, node.x, collisionNode.y + collisionNode.height,
          node.width, node.height, true);
      } 
      else if(collisionNode.el.classList.contains('disableCollision')){
        moved = this.moveNode(node, node.x, node.y,
          node.width, node.height, true);
      }
      else if(node.el.classList.contains('grid-stack-placeholder'))
      {
        if($('#'+node.id).hasClass('disableCollision'))
       {
          moved = this.moveNode(node, node.x, node.y,
          node.width, node.height, true);
       }
      }
      else {
          moved = this.moveNode(collisionNode, collisionNode.x, node.y + node.height,
          collisionNode.width, collisionNode.height, true);
      }

That works but only for the predefined size and position of gridstack. Because it return the size and position of the placeholder only when the move or resize stop in a predefined size or position.

So, I will try to bypass the _fixCollisions function in onEndMoving function.

[adumesny]

so you are asking for on a per item to be able to overlap or not ? not the entire grid ? sorry but this point I don't have the cycle for a one off request. if others can chime in on this usefulness than I would consider it. If you get it working and fully tested consider submitting a PR to be considered in the release. thank you.

[PrestaMagician]

No, I only want to add that feature for widget with a specific class. Example: If the widget has class 'disableCollision', the collisions are disabled ans so, that widget can to be located every where on the grid.