core-drag-drop bug ? #729
Description
I have found something weird with drag and drop (chrome 37.0.2062.94, polymer#0.3.5)
I am new with web-components/polymer so maybe I am wrong ;-)
When you drag the green div, all is fine.
When you drag the red div, the avatar doesn't follow the cursor, and when dropping event.relatedTarget is null.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/layout.html">
<script src="bower_components/polymer/polymer.js"></script>
<link rel="import" id="t-popup" href="popup.html">
<script>
addEventListener('drag-start', function(e) {
var dragInfo = e.detail;
dragInfo.avatar.innerHTML = 'dragging';
dragInfo.drag = function() {};
dragInfo.drop = drop;
});
function drop(dragInfo) {
var dropTarget = dragInfo.event.relatedTarget;
if (dropTarget.id === 'drop') {
var f = dragInfo.framed;
var d = document.createElement('div');
d.style.left = f.x - 4 + 'px';
d.style.top = f.y - 4 + 'px';
d.style.width = '10px';
d.style.height = '10px';
d.style.position = 'absolute';
d.style.display = 'inline-block';
d.style.backgroundColor = 'yellow';
dropTarget.appendChild(d);
}
};
</script>
</head>
<body>
<core-drag-drop></core-drag-drop>
<div id='drop' style="width: 200px; height: 200px; background-color: orange;"></div>
<div style="width: 50px; height:50px; background-color: green;"></div>
<x-popup></x-popup>
</body>
</html>popup.html
<link rel="import" href="bower_components/core-drag-drop/core-drag-drop.html">
<polymer-element name="x-popup" attributes="closeButton">
<template>
<style>
:host {
display: inline-block;
}
:host #content {
width: 50px;
height: 50px;
background-color: red;
}
</style>
<div id="content" draggable="true"></div>
</template>
</polymer-element>
<script>
Polymer('x-popup', {});
</script>