Sortable/Sortable.html

<link rel="import" href="../polymer/polymer.html">
<script src="./Sortable.js"></script>

<dom-module id="sortable-js">
  <template>
    <content></content>
  </template>
</dom-module>
<script>
  Polymer({
    is: "sortable-js",

    properties: {
      group             : { type: String, value: () => Math.random(), observer: "groupChanged" },
      sort              : { type: Boolean, value: true, observer: "sortChanged" },
      disabled          : { type: Boolean, value: false, observer: "disabledChanged" },
      store             : { type: Object, value: null, observer: "storeChanged" },
      handle            : { type: String, value: null, observer: "handleChanged" },
      scrollSensitivity : { type: Number, value: 30, observer: "scrollSensitivityChanged" },
      scrollSpeed       : { type: Number, value: 10, observer: "scrollSpeedChanged" },
      ghostClass        : { type: String, value: "sortable-ghost", observer: "ghostClassChanged" },
      chosenClass       : { type: String, value: "sortable-chosen", observer: "chosenClassChanged" },
      ignore            : { type: String, value: "a, img", observer: "ignoreChanged" },
      filter            : { type: Object, value: null, observer: "filterChanged" },
      animation         : { type: Number, value: 0, observer: "animationChanged" },
      dropBubble        : { type: Boolean, value: false, observer: "dropBubbleChanged" },
      dragoverBubble    : { type: Boolean, value: false, observer: "dragoverBubbleChanged" },
      dataIdAttr        : { type: String, value: "data-id", observer: "dataIdAttrChanged" },
      delay             : { type: Number, value: 0, observer: "delayChanged" },
      forceFallback     : { type: Boolean, value: false, observer: "forceFallbackChanged" },
      fallbackClass     : { type: String, value: "sortable-fallback", observer: "fallbackClassChanged" },
      fallbackOnBody    : { type: Boolean, value: false, observer: "fallbackOnBodyChanged" },
      draggable         : {},
      scroll            : {}
    },

    created() {
      // override default DOM property behavior
      Object.defineProperties(this, {
        draggable: { get() { return this._draggable || this.getAttribute("draggable") || ">*"}, set(value) { this._draggable = value; this.draggableChanged(value)} },
        scroll: { get() { return this._scroll || JSON.parse(this.getAttribute("scroll") || "true") }, set(value) { this._scroll = value; this.scrollChanged(value)} }
      })
    },

    attached: function() {
      // Given
      //   <sortable-js>
      //     <template is="dom-repeat" items={{data}}>
      //       <div>
      //         <template is="dom-if" if="true">
      //           <span>hello</span></template></div>
      // After render, it becomes
      //   <sortable-js>
      //     <div>
      //       <span>hello</span>
      //       <template is="dom-if">
      //     <tempalte is="dom-repeat">

      this.initialize();

    },

    detached: function() {
      this.sortable.destroy()
    },

    initialize: function() {

      var templates = this.querySelectorAll("template[is='dom-repeat']")
      var template = templates[templates.length-1]

      var options = {}
      Object.keys(this.properties).forEach(key => {
        options[key] = this[key]
      })

      this.sortable = Sortable.create(this, Object.assign(options, {
        onUpdate: e => {
          if (template) {
            template.splice("items", e.newIndex, 0, template.splice("items", e.oldIndex, 1)[0])
          }
          this.fire("update", e)
        },

        onAdd: e => {
          if (template) {
            var froms = e.from.querySelectorAll("template[is='dom-repeat']")
            var from = froms[froms.length-1]
            var item = from.items[e.oldIndex]
            template.splice("items", e.newIndex, 0, item)
          }
          this.fire("add", e)
        },

        onRemove: e => {
          if (template) {
            template.splice("items", e.oldIndex, 1)[0]
          }
          this.fire("remove", e)
        },

        onStart: e => {
          this.fire("start", e)
        },

        onEnd: e => {
          this.fire("end", e)
        },

        onSort: e => {
          this.fire("sort", e)
        },

        onFilter: e => {
          this.fire("filter", e)
        },

        onMove: e => {
          this.fire("move", e)
        }
      }))

    },

    groupChanged             : function(value) { this.sortable && this.sortable.option("group", value) },
    sortChanged              : function(value) { this.sortable && this.sortable.option("sort", value) },
    disabledChanged          : function(value) { this.sortable && this.sortable.option("disabled", value) },
    storeChanged             : function(value) { this.sortable && this.sortable.option("store", value) },
    handleChanged            : function(value) { this.sortable && this.sortable.option("handle", value) },
    scrollChanged           : function(value) { this.sortable && this.sortable.option("scroll", value) },
    scrollSensitivityChanged : function(value) { this.sortable && this.sortable.option("scrollSensitivity", value) },
    scrollSpeedChanged       : function(value) { this.sortable && this.sortable.option("scrollSpeed", value) },
    draggableChanged        : function(value) { this.sortable && this.sortable.option("draggable", value) },
    ghostClassChanged        : function(value) { this.sortable && this.sortable.option("ghostClass", value) },
    chosenClassChanged       : function(value) { this.sortable && this.sortable.option("chosenClass", value) },
    ignoreChanged            : function(value) { this.sortable && this.sortable.option("ignore", value) },
    filterChanged            : function(value) { this.sortable && this.sortable.option("filter", value) },
    animationChanged         : function(value) { this.sortable && this.sortable.option("animation", value) },
    dropBubbleChanged        : function(value) { this.sortable && this.sortable.option("dropBubble", value) },
    dragoverBubbleChanged    : function(value) { this.sortable && this.sortable.option("dragoverBubble", value) },
    dataIdAttrChanged        : function(value) { this.sortable && this.sortable.option("dataIdAttr", value) },
    delayChanged             : function(value) { this.sortable && this.sortable.option("delay", value) },
    forceFallbackChanged     : function(value) { this.sortable && this.sortable.option("forceFallback", value) },
    fallbackClassChanged     : function(value) { this.sortable && this.sortable.option("fallbackClass", value) },
    fallbackOnBodyChanged    : function(value) { this.sortable && this.sortable.option("fallbackOnBody", value) }
  })
</script>