Bug 25691 - No drop event when dropping on a dynamic page element.
Summary: No drop event when dropping on a dynamic page element.
Status: RESOLVED DUPLICATE of bug 25690
Alias: None
Product: WebKit
Classification: Unclassified
Component: JavaScriptCore (show other bugs)
Version: 525.x (Safari 3.1)
Hardware: Mac OS X 10.5
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2009-05-11 06:51 PDT by noel gordon
Modified: 2009-05-11 19:06 PDT (History)
1 user (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description noel gordon 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.
Comment 1 noel gordon 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>
Comment 2 Mark Rowe (bdash) 2009-05-11 19:06:07 PDT 

*** This bug has been marked as a duplicate of 25690 ***