Polymer 拖放事件对象属性包含父 srcElement答案

【问题标题】：Polymer drag-drop event object property contains parent srcElementPolymer 拖放事件对象属性包含父 srcElement
【发布时间】：2014-12-28 18:36:14
【问题描述】：

我正在使用 Polymer 构建一个简单的单页应用程序。我创建了一个包含 Polymer-drag-drop 演示的自定义元素。拖动和创建 div 的操作很好，事件对象的 relatedTarget 属性包含对正确放置 div 的引用。问题是 srcElement 和 target 属性都包含对 shadowRoot 父聚合物元素的引用，在本例中为“workspace-drop”。

编辑：

记录 event.currentTarget on fire 还包含对包含有色子项的 parentDiv 的引用。 <div flex horizontal style="border: 1px dotted silver;">

代码如下（几乎是演示，但在聚合物元素中）：

<link rel="import" href="/components/polymer/polymer.html">
  <script src="/components/webcomponentsjs/webcomponents.js">
  </script>
      <link rel="import" href="/components/core-drag-drop/core-drag-drop.html">


<polymer-element name="workspace-drop">
  <template>
<style>

    html {
      font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
    }

    body {
      height: 100vh;
      margin: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 16px;
    }

    .dropped {
      position: absolute;
      border: 1px solid black;
      width: 5px;
      height: 5px;
    }

  </style>
<div flex horizontal style="border: 1px dotted silver;">

    <core-drag-drop></core-drag-drop>

    <div class="box" style="background-color: lightblue;" draggable="false"></div>

    <div class="box" style="background-color: orange;" draggable="false"></div>

    <div class="box" style="background-color: lightgreen;" draggable="false"></div>

    <div id="hello">Hello World</div>

  </div>



  <div id="drop" hash="test" class="box" style="border: 3px solid silver; position: relative; width: 300px; height: 300px;" draggable="false"></div>



  </template>
  <script>
 (function(){

 addEventListener('drag-start', function(e) {

      var dragInfo = e.detail;
      // flaw #2: e vs dragInfo.event
      console.log(e.detail);
      var color = dragInfo.event.target.style.backgroundColor;
      dragInfo.avatar.style.cssText = 'border: 3px solid ' + color + '; width: 32px; height: 32px; border-radius: 32px; background-color: whitesmoke';

      dragInfo.drag = function() {};
      dragInfo.drop = drop;
    });
    //
    function drop(dragInfo) {
      var color = dragInfo.avatar.style.borderColor;
      var dropTarget = dragInfo.event.relatedTarget;

      if (color && dropTarget.id === 'drop') {
        var f = dragInfo.framed;
        var d = document.createElement('div');
        d.className = 'dropped';
        d.style.left = f.x - 4 + 'px';
        d.style.top = f.y - 4 + 'px';
        d.style.backgroundColor = color;
        dropTarget.appendChild(d);
        dropTarget.style.backgroundColor = color;
      }
    }


    Polymer({
        ready: function(){


        }

    });
     })();
  </script>
</polymer-element>

感谢任何帮助！

【问题讨论】：

标签： javascript drag-and-drop polymer web-component shadow-dom

【解决方案1】：

想通了。和这个问题有关。

When loggin an event object, currentTarget is null, but when logging event.currentTarget it logs a value. Why is that?

在拖动操作完成后记录事件会返回对处于其已完成状态的对象的引用。在拖动开始时记录特定的 event.target 属性会在开始时引用正确的对象。

【讨论】：