javascript - Polymer拖放事件对象属性包含父srcElement

Question

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

编辑:

记录 event.currentTarget 着火还包含对包含彩色子项的 ParentDiv 的引用。 <div flex horizontal style="border: 1px dotted silver;">

代码如下(几乎是演示，但在 polymer 元素中):

<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>

感谢任何帮助!

Answer 1

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

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

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