gridstack-grid.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['grid-stack'],

    didInsertElement() {
        var options = {
            width: this.get('width'),
            cellHeight: this.get('cellHeight'),
            verticalMargin: this.get('verticalMargin'),
            handle: this.get('handle'),
            auto: false // Important, see gridstack-item comments
        };

        this.gridstack = this.$().gridstack(options).data('gridstack');
        this.$().on('change', this.gridstackChange.bind(this));
    },

    willDestroyElement() {
        this.$().off('change');
        this.gridstack.destroy();
    },

    gridstackChange(e, items) {
        console.log('gridstackChange');
        var positions = [];
        if(items) {
            positions = items.map((i) => {
                return {id: i.el.data('id'), x: i.x, y: i.y, width: i.width, height: i.height};
            });
        }
        if (!this.get('disablePositionUpdate')) {
            this.set('disablePositionUpdate', true);
            this.get('onchange')(positions);
            this.set('disablePositionUpdate', false);
        }
    },

});

gridstack-item.js

import Ember from 'ember';

export default Ember.Component.extend({
    attributeBindings: ['x:data-gs-x', 'y:data-gs-y', 'width:data-gs-width', 'height:data-gs-height', 'itemId:data-id'],
    classNames: ['grid-stack-item'],

    // When a new section is added in model, then automatically new DOM element will be inserted, and we need here attach
    // it to gridstack plugin by calling .addWidget. It actually works in case when the componenent is rendered first time - 
    // for every existing section this method will be called. So we don't need to initialize elements when creating gridstack
    // instance in parent component `this.$().gridstack({auto: false})`
    didInsertElement() {
        Ember.run.schedule("afterRender", this, () => {
            this.gridstack = this.$().closest('.grid-stack').data('gridstack');
            this.gridstack.addWidget(this.$());
        });
    },

    didUpdate() {
        Ember.run.schedule("afterRender", this, () => {
        if(!this.get('disablePositionUpdate')) {
            var node = this.$().data('_gridstack_node');
            if(node) {
                if(node.x !== this.get('x') || node.y !== this.get('y') ||
                    node.width !== this.get('width') || node.height !== this.get('height')) {
                    console.log('didUpdate', this.get('item.content.text'), this.get('x'), this.get('y'), this.get('width'), this.get('height'));
                    this.set('parentView.disablePositionUpdate', true);
                    this.gridstack.update(this.$(), this.get('x'), this.get('y'), this.get('width'), this.get('height'));
                    this.set('parentView.disablePositionUpdate', false);
                }
            }
        }
        });
    },

    // When section is deleted in model, then corresponding DOM element will be removed and we need to detach it from
    // the gridtack instance by calling .removeWidget
    willDestroyElement() {
        var el = this.$();
        Ember.run.schedule("afterRender", this, () => {
            this.gridstack.removeWidget(el, false);
        });
    },

    disablePositionUpdate: Ember.computed.alias('parentView.disablePositionUpdate'),
});

persona.hbs

<h1>{{content-editable value=persona.name focus-out='save' tagName='span'}}</h1>

<div class="persona">
    {{#gridstack-grid onchange=(action 'gridstackChange') items=persona.sections width=3 cellHeight=80
    verticalMargin=10 handle='.drag-handle'}}
        {{#each persona.sections as |section|}}
            {{#gridstack-item x=section.x y=section.y width=section.width height=section.height itemId=section.id
            item=section removeAction=(action 'removeSection')}}
                {{persona-section section=section}}
            {{/gridstack-item}}
        {{/each}}
    {{/gridstack-grid}}
</div>
<br>
<br>
<button {{action 'newSection'}}>Add Section</button>