RESOLVED DUPLICATE of bug 25690 Bug 25691
No drop event when dropping on a dynamic page element. 
https://bugs.webkit.org/show_bug.cgi?id=25691
Summary No drop event when dropping on a dynamic page element.
noel gordon
Reported 2009-05-11 06:51:04 PDT
Create a <div> with text inside it, attach drag drop listeners. Dynamically update the <div> text (using .innerHTML, for example) while dragging Text or URLs over the <div>. 1) Release the mouse button while dragging over the dynamic text; a drop event should be generated. 2) Press the escape key (to cancel the drag) while dragging over the dynamic text; a dragleave event should be generated. Safari 4 Beta (5528.16), FAILS 1) mouse button release: no drop event is generated. 2) escape key: no dragleave event is generated. Safari 3.1.2 (5525.2.0.1), FAILS 1) mouse button release: no drop event is generated. 2) escape key: no dragleave event is generated. IE7 (7.0.60001.18000) Vista SP1, OK 1) mouse button release: drop event generated. 2) escape key: dragleave event generated. IE6 (6.0.2900.5512.xpsp_sp3) XP SP3, OK 1) mouse button release: drop event generated. 2) escape key: dragleave event generated.
Attachments
Add attachment proposed patch, testcase, etc.
noel gordon
Comment 1 2009-05-11 07:02:49 PDT
oh add the test case here. <html> <head> <style type="text/css"> body { font-family:Verdana,Arial; } pre { font-size:11px; font-weight:bold; } .dropZone { font-size:28px; border:3px solid white; } .eventCounts { font-size:15px; color:#505050; } </style> <script type="text/javascript"> var drag_event_count = 0; var drag_enter_count = 0; var drag_leave_count = 0; var drag_over_count = 0; var drag_drop_count = 0; function showEventCounts(e) { document.getElementById('results').innerHTML = e.type; ++drag_event_count; if (e.type == 'dragenter') { ++drag_enter_count; } else if (e.type == 'dragover') { ++drag_over_count; } else if (e.type == 'dragleave') { ++drag_leave_count; } else if (e.type == 'drop') { ++drag_drop_count; } document.getElementById('details').innerHTML = 'drag_event_count: <b>' + drag_event_count + '</b>' + '<br> drag_enter_count: <b>' + drag_enter_count + '</b>' + '<br> drag_over_count: <b>' + drag_over_count + '</b>' + '<br> drag_leave_count: <b>' + drag_leave_count + '</b>' + '<br> drag_drop_count: <b>' + drag_drop_count + '</b>' + '<br>'; } function onHover(id) { var elem = document.getElementById(id); elem.style.border = 'blue 3px solid'; showEventCounts(event); event.dataTransfer.dropEffect = 'copy'; event.returnValue = false; } function onLeave(id) { var elem = document.getElementById(id); elem.style.border = 'white 3px solid'; showEventCounts(event); } function onDrop(id) { var elem = document.getElementById(id); elem.style.border = 'white 3px solid'; showEventCounts(event); var url = event.dataTransfer.getData('URL'); var text = event.dataTransfer.getData('Text'); var r = document.getElementById('results'); if (url) { r.innerHTML = 'drop url[' + url + ']'; } else if (text) { r.innerHTML = 'drop text[' + text + ']'; } else { r.innerHTML = 'drop empty[]'; } } </script> </head> <body topmargin="20" leftmargin="40"> <p><center> <!-- drop target <div> with inline drag event handlers. Note drag event counts are shown in the interior div id="details" using innerHTML calls. See showEventCounts() above. --> <div id="dropzone" class="dropZone" ondragenter="onHover('dropzone');" ondragover="onHover('dropzone');" ondragleave="onLeave('dropzone');" ondrop="onDrop('dropzone');"> Select text and drag drop it on this element. <p><div id="details" class="eventCounts"></div><p> </div> <p></center> <!-- drag drop events/results are shown in the following <pre> --> <pre id="results"></pre> </body> </html>
Mark Rowe (bdash)
Comment 2 2009-05-11 19:06:07 PDT
*** This bug has been marked as a duplicate of 25690 ***
Note You need to log in before you can comment on or make changes to this bug.