How to set a predefined height or width for "grid-stack-item" with acceptWidgets

0
votes

I'm using gridstack with acceptWidgets to drag-and-drop widgets from a left side panel to the main panel, kind of similar to http://gridstackjs.com/demo/two.html

In my case, I want to set height, width and other item attributes to my "grid-stack-item". However, setting up those attributes won't affect when the item is dropped in the gridstack.

Here is a JSFiddle: https://jsfiddle.net/trevisan/wt7bg6s1/8/

Note that the "Drag me" element has data-gs-width="6" which I expected to make it stretch as my gridstack has 6 columns.

<div class="grid-stack-item" data-gs-width="6">
  <div class="grid-stack-item-content">Drag me</div>
</div>

I have tried to call makeWidget method but then I end up having two widgets on my gridstack.

Does anyone have an idea how to figure that out?

1
javascriptgridstack

1 Answers

0
votes

Notice that Drag me element is not in gridstack even it has class name "grid-stack-item",

#grid element and #grid2 element has initialized by gridstack but sidebar element(Drag me element) didn't:

        $('#grid1').gridstack(options);
        $('#grid2').gridstack(_.defaults({
            float: true
        }, options));

So the data-gs-width attribute means nothing to Drag me element.