Bug 25691
| Summary: | No drop event when dropping on a dynamic page element. | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | noel gordon <noel.gordon> |
| Component: | JavaScriptCore | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | sam |
| Priority: | P2 | ||
| Version: | 525.x (Safari 3.1) | ||
| Hardware: | Mac | ||
| OS: | OS X 10.5 | ||
noel gordon
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
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)
*** This bug has been marked as a duplicate of 25690 ***