Polymer 2.0-尝试实现HTML5拖放

我正在尝试为polymer2.0组件实现HTML5拖放，类似于中的拖放选项

HTML:

：主持人{
显示：块；
填充：10px；
}
.卡片{
利润率：24px；
填充：16px；
颜色：#7575；
边界半径：5px；
背景色：#fff；
盒影：02px2px0RGBA（0,0,0,0.14），01px5px0RGBA（0,0,0,0.12），03px1px-2pxRGBA（0,0,0,0.2）；
}
输入：
聚合物({
是：'演示元素'，
allowDrop:功能（ev）{
ev.preventDefault（）；
},
拖动：功能（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
},
下降：功能（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
控制台日志（ev）
ev.target.appendChild（document.getElementById（数据））；
}
});
聚合物（{is:“演示元素”}）；

JSFIDLE供参考：

---

这里的关键是对本机HTML5拖放事件使用

on-

符号。此外，事件不需要数据绑定符号

这是您更正的标记

HTML:

：主持人{
显示：块；
填充：10px；
}
.卡片{
利润率：24px；
填充：16px；
颜色：#7575；
边界半径：5px；
背景色：#fff；
盒影：02px2px0RGBA（0,0,0,0.14），01px5px0RGBA（0,0,0,0.12），03px1px-2pxRGBA（0,0,0,0.2）；
}
输入：
聚合物({
是：'演示元素'，
allowDrop:功能（ev）{
ev.preventDefault（）；
},
拖动：功能（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
},
下降：功能（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
控制台日志（ev）
ev.target.appendChild（this.shadowRoot.querySelector（'#'+data））；
}
});
聚合物（{is:“演示元素”}）；

对于Polymer 2.0，将

此更改为
此.shadowRoot.querySelector
：

  drop (ev){
      ev.preventDefault();
      var data=ev.dataTransfer.getData("text");
      ev.target.appendChild(this.shadowRoot.querySelector('#' + data));
  }

我更新了JSFIDLE，但它也不起作用-对，更新了标记和代码。有两个缺陷：首先，未设置被拖动div的id，因此drag（）方法中的ev.target.id返回一个空字符串。另一个问题是document.getElementById，它也没有返回拖动的div。将其更改为Polymer 2.0特定的this.shadowRoot.querySelector（“#”+数据）。这已经有一年多了，您从未留下答案或选择过答案。“当我看到这一点时，我将取消我的反对票。”劳尔斯，我使用了不同的方法，但选择了最接近的答案
    <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>

  drop (ev){
      ev.preventDefault();
      var data=ev.dataTransfer.getData("text");
      ev.target.appendChild(this.shadowRoot.querySelector('#' + data));
  }