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

Question

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

EDIT:

Logging event.currentTarget в огне также содержит ссылку на 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

Понял. Это связано с этим вопросом.

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

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