<!DOCTYPE html>
<html>

  <head>
    <script src="http://www.polymer-project.org/components/platform/platform.js"></script>
    <link rel="import" href="./sorting-list.html">
  </head>

  <body>
    <sorting-list></sorting-list>
  </body>

</html>
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<script src='https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js'></script>

<dom-module id="sorting-list">
  <template>
    <style>
      :host {}
      /*css copied from dist/dragula.css*/
      
      .gu-mirror {
        position: fixed !important;
        margin: 0 !important;
        z-index: 9999 !important;
        opacity: 0.8;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
      }
      
      .gu-hide {
        display: none !important;
      }
      
      .gu-unselectable {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
      }
      
      .gu-transit {
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
        filter: alpha(opacity=20);
      }
    </style>

    <paper-listbox style="border-style: dotted;" id="container1">
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
      <paper-item>Item 3</paper-item>
    </paper-listbox>

  </template>

  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'sorting-list',

        properties: {


          /**
           * indicates the options to use for dragula
           */
          _dragulaOptions: Object,

          _drake: {
            type: Object,
            computed: '_createDrake(_containers)'
          },

          _containers: {
            type: Array,
            readOnly: true,
            value: function() {
              return [this.$.container1, this.$.container2];
            }
          }

        },

        // Element Lifecycle

        ready: function() {

        },

        attached: function() {
          this._appendLocalDom();

        },

        detached: function() {

        },

        // Element Behavior

        _createDrake: function(containers) {
          return dragula(containers);
        },

        _appendLocalDom: function() {
          this._drake.on('drop', function(el, target, source, sibling) {
            Polymer.dom(target).insertBefore(el, sibling);
          })
        }

      });
    })();
  </script>
</dom-module>