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/

It's been well over a year and you never left an answer or picked an answer. I'll remove my down-vote when I see that. — Raults, Mar 04 '19 at 20:38
@Raults, I was using different approach but selected closest answer — Naga Sai A, Mar 04 '19 at 21:04

score 2 · Accepted Answer · edited Sep 04 '17 at 08:34

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>

i updated jsfiddle and it is not working either - https://jsfiddle.net/Nagasai_Aytha/adq1qxr9/2/ — Naga Sai A, Jul 17 '17 at 17:23
Right, updated the markup and code. There were two flaws: first of all, the id of the dragged div was not set, so ev.target.id in the drag() method returned an empty String. The other problem was the document.getElementById which did not return the dragged div either. Changed it to a Polymer 2.0 specific this.shadowRoot.querySelector('#' + data). — istvank, Jul 19 '17 at 13:07

score 1 · Answer 2 · edited Sep 04 '17 at 08:36

1

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));
  }

edited Sep 04 '17 at 08:36

Let Me Tink About It

15,156
21
98
207

answered Jul 19 '17 at 12:50

BoefAE

11
1

Polymer 2.0 - Trying to implement HTML5 drag and drop

2 Answers2