Polymer 2.0 - Trying to implement HTML5 drag and drop

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>