Polymer 2.0 - Trying to implement HTML5 drag and drop - polymer

Question

I am trying to implement HTML5 drag and drop for polymer2.0 components similar to the drag and drop option as in http://jsfiddle.net/U55rc/
HTML:
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-flex-layout/v2.0.0/iron-flex-layout/">
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-flex-layout-classes.html">
<dom-module id="demo-element">
<template>
<style include="shared-styles">
: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);
}
</style>
<div draggable="true" ondragstart="{{drag(event)}}" >
Input:
<input type="text"/>
</div>
<div class="card" id="div1" ondrop="{{drop(event)}}" ondragover="{{allowDrop(event)}}"></div>
</template>
<script>
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));
}
});
</script>
<script>Polymer({is: "demo-element"});</script>
</dom-module>
<demo-element></demo-element>
JSFiddle for reference:
https://jsfiddle.net/Nagasai_Aytha/b62to481/

Answer 1

The key here is to use the on-<event> notation for the native HTML5 drag and drop events. Also, you don't need data binding notation for the events.
Here is your corrected markup.
HTML:
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-flex-layout/v2.0.0/iron-flex-layout/">
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-flex-layout-classes.html">
<dom-module id="demo-element">
<template>
<style include="shared-styles">
: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);
}
</style>
<div id="draggedDiv" draggable="true" on-dragstart="drag" >
Input:
<input type="text"/>
</div>
<div class="card" id="div1" on-drop="drop" on-dragover="allowDrop"></div>
</template>
<script>
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(this.shadowRoot.querySelector('#' + data));
}
});
</script>
<script>Polymer({is: "demo-element"});</script>
</dom-module>
<demo-element></demo-element>

Answer 2

For Polymer 2.0 change this.$$ to this.shadowRoot.querySelector:
drop (ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
ev.target.appendChild(this.shadowRoot.querySelector('#' + data));
}