polymer-gridstack.html

<link rel="import" href="../polymer/polymer-element.html">
<script src="../jquery/dist/jquery.min.js"></script>
<script src="../jquery-ui/jquery-ui.min.js"></script>
<script src="../underscore/underscore-min.js"></script>
<script src="gridstack-custom/modified-gridstack.js"></script>

<dom-module id="polymer-gridstack">  
  <template>
    <style>
      :host {
        display: block;
        background-color: var(--background-color,#999999);
        padding:var(--padding-all,10px 0px);
      }
    </style>
    <slot></slot>          
  </template>

  <script>
    /** 
     * `polymer-gridstack`
     * A drag n drop resize gridstack extension for polymer elements
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class PolymerGridstack extends Polymer.Element {
      static get is() { return 'polymer-gridstack'; }
      static get properties() {
        return {
          dataProperties: {
            type: Object
          }
        };
      }
      ready(){
        super.ready();
        $(this.firstElementChild).gridstack(this.dataProperties);
      }
    }

    window.customElements.define(PolymerGridstack.is, PolymerGridstack);
  </script>
</dom-module>