Свойство объекта события перетаскивания полимера содержит родительский элемент srcElement.

Question

Я создаю простое одностраничное приложение, используя Polymer. Я создал пользовательский элемент, который содержит демонстрацию Polymer-drag-drop. Действие перетаскивания и создания div отлично работает, свойство relatedTarget объекта события содержит ссылку на правильный drop div. Проблема заключается в том, что свойство srcElement и target содержат ссылки на родительский полимерный элемент shadowRoot, в данном случае "рабочая область-капля".

РЕДАКТИРОВАТЬ:

Ведение журнала 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>

Любая помощь приветствуется!

Answer 1

Догадаться. Это связано с этим вопросом.

При входе в систему объекта события currentTarget имеет значение null, но при регистрации события event.currentTarget записывается значение. Это почему?

Регистрация события после завершения действия перетаскивания возвращает ссылку на объект в его завершенном состоянии. Регистрация определенного свойства event.target при перетаскивании давала ссылку на правильный объект при запуске.