title: Polymer 2.0 - Trying to implement HTML5 drag and drop
body: <p>I am trying to implement HTML5 drag and drop for polymer2.0 components similar to the drag and drop option as in <a href="http://jsfiddle.net/U55rc/" rel="nofollow noreferrer">http://jsfiddle.net/U55rc/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-flex-layout/v2.0.0/iron-flex-layout/"&gt;
  &lt;script src="../webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
  &lt;link rel="import" href="iron-flex-layout-classes.html"&gt;
  &lt;dom-module id="demo-element"&gt;
    &lt;template&gt;
      &lt;style include="shared-styles"&gt;
        :host {
          display: block;
  
          padding: 10px;
        }
  
       .card {
          margin: 24px;
          padding: 16px;
          color: #757575;
          border-radius: 5px;
          background-color: #fff;
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        }
      &lt;/style&gt;
  
  
      &lt;div  draggable="true" ondragstart="{{drag(event)}}" &gt;
      Input:
      &lt;input type="text"/&gt;
      &lt;/div&gt;
                &lt;div class="card" id="div1" ondrop="{{drop(event)}}" ondragover="{{allowDrop(event)}}"&gt;&lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
        is: 'demo-element',
        allowDrop:function(ev){
              ev.preventDefault();
          },
        drag: function(ev){
            ev.dataTransfer.setData("text",ev.target.id);
        },
        drop:function(ev){
            ev.preventDefault();
            var data=ev.dataTransfer.getData("text");
            console.log(ev)
            ev.target.appendChild(document.getElementById(data));
        }
      });
  
    &lt;/script&gt;
    &lt;script&gt;Polymer({is: "demo-element"});&lt;/script&gt;
  &lt;/dom-module&gt;
  &lt;demo-element&gt;&lt;/demo-element&gt;
  </code></pre>
  
  <p>JSFiddle for reference:
  <a href="https://jsfiddle.net/Nagasai_Aytha/b62to481/" rel="nofollow noreferrer">https://jsfiddle.net/Nagasai_Aytha/b62to481/</a></p>