polymer-sortablejs-template.html

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

<dom-module id="sortable-js">
  <template>
    <slot></slot>
  </template>
</dom-module>
<script>
'use strict';
  Polymer({
    is: "sortable-js",

    properties: {
      /*properties*/
    },

    created: function() {
      // Override default DOM property behavior
      Object.defineProperties(this, {
        draggable: { get: function() { return this._draggable || this.getAttribute("draggable") || ">*";}, set: function(value) { this._draggable = value; this.draggableChanged(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.destroy();
    },


    initialize: function() {
      var templates = this.querySelectorAll(Polymer.Element ? "dom-repeat" : "template[is='dom-repeat']");
      var template = templates[templates.length-1];

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

      var _this = this;
      var eventCallbacks = {
        onUpdate: function (e) {
          if (template) {
            var elements = _this.children;
            Array.prototype.filter.call(elements, function(el) {
              return !el.classList.contains(_this.ghostClass) ||
                     !el.nodeName.toLowerCase() === 'tempalte' ||
                     !el.nodeName.toLowerCase() === 'dom-repeat';
            });
            if (e.oldIndex < e.newIndex) {
              elements[e.oldIndex].parentNode.insertBefore(elements[e.newIndex], elements[e.oldIndex]);
            } else {
              elements[e.oldIndex].parentNode.insertBefore(elements[e.newIndex], elements[e.oldIndex].nextSibling);
            }
            template.splice("items", e.newIndex, 0, template.splice("items", e.oldIndex, 1)[0]);
						/*
            if (manuallyHandleUpdateEvents) {
              template.items.splice(e.newIndex, 0, template.items.splice(e.oldIndex, 1)[0]);
            } else {
              template.splice("items", e.newIndex, 0, template.splice("items", e.oldIndex, 1)[0]);
            }
						*/
          }
          _this.fire("update", e);
        },

        onAdd: function(e) {
          if (template) {
            var froms = e.from.querySelectorAll(Polymer.Element ? "dom-repeat" : "template[is='dom-repeat']");
            var from = froms[froms.length-1];
            var model = from.modelForElement(e.item);
            template.splice("items", e.newIndex, 0, model.item);
            e.model = model;
          }
          _this.fire("add", e);
        },

        onRemove: function(e) {
          // Donot remove if group.pull is clone
          if (e.target.group.pull === 'clone') {
            return false;
          }
          if (template) {
            var item = template.splice("items", e.oldIndex, 1)[0];
            e.model = {item: item};
          }
          _this.fire("remove", e);
        },

        onChoose: function(e) {
          _this.fire("choose", e);
        },

        onStart: function(e) {
          /* _this._elements = [];
          var elements = _this.querySelectorAll(':not(dom-repeat):not(template):not(.'+ _this.ghostClass + ')');
          Array.prototype.forEach.call(elements, function(element) {
            _this._elements.push(element);
          }); */

          _this.fire("start", e);
        },

        onEnd: function(e) {
          _this.fire("end", e);
        },

        onSort: function(e) {
          _this.fire("sort", e);
        },

        onFilter: function(e) {
          _this.fire("filter", e);
        },

        onMove: function(e) {
          _this.fire("move", e);
        },

        onClone: function(e) {
          _this.fire("clone", e);
        }
      };

      Object.keys(eventCallbacks).forEach(function(name){
        options[name] = eventCallbacks[name];
      });

      this.sortable = Sortable.create(this, options);
    },

    destroy: function() {
      if(this.sortable) {
        this.sortable.destroy();
      }
    },

    groupChanged: function(value) { 
      if (typeof value === 'string') {
        return this.set('group', { name: value });
      }
      this.sortable && this.sortable.option("group",  value);
    },

    /*propertyobservers*/
  });
</script>