Is it possible to capture Drag and Drop events in modern browsers, and
if so, how? Specifically, I want to be able to drag images and URLs
from one browser window to another, and then capture data about the
dropped object (specifically, it's URL).
What I've learned so far is that if you have a form field (input
type=text, or textarea), AND that field has the focus, then you can
drag an object to it, and that field will be populated by the URL of
the dragged object (By the nature of this task, the target window does
not have the focus when you begin to drag). This seems to work
cross-browser and cross-platform.
This has serious limitations: 1) you can only drop to one field (the
field that has focus when you leave the page) and 2) there needs be a
field with focus on it for this to work. This is not satisfactory for
my task, so I want to know if I can generically capture this
information without having a field with the focus. I've also found
that window.ondragdrop doesn't seem to work.
The successful answer will either 1) prove with sufficient citations
(1 reputable source would be fine) that this is NOT possible (outside
of what I've already discovered) or 2) provide runnable
cross-browser/cross-platform code example of how this can be done.
Here is an example of code (this requires the prototype.js library,
which you can find easily on google) that will pop up an alert if
something is dragged to a focused field:
<html>
<head>
<title>test</title>
<script type="text/javascript">
function alertName (evt) {
var r = '';
for (var i = 0; i < evt.data.length; i++) {
r += i + ': ' + evt.data[i] + '\n';
}
alert(r);
return false;
}
</script>
<script src="prototype.js" type="text/javascript"></script>
<style>
.supertext textarea {color:blue; background:gray; }
</style>
</head>
<body>
<!-- a href="#" onclick="javascript:window.open('links.htm',null,'height=250,width=150,status=yes,toolbar=no');">click</a
-->
<form id="thing">
<span class="supertext">
<input type="text" id="testy" rows="50" cols="100" value="" />
</span>
<input type="checkbox"/>
</form>
<script type="text/javascript">
new Form.Element.Observer('testy', 1.0, function(element,
value) { alert(value); } );
// alert(Prototype.Version);
// onDrop="alert(document.forms[0].testy.value);"
onMouseOver="document.forms[0].testy.focus();"
this.onDragDrop = new function (evt) { return false; }
</script>
</body>
</html> |
