Drag and drop demo using the File API
+ a patch for other browsers
Demo
Drop files from desktop here
How it works
This fix works with modernizing browsers which dont support the File API drop functionality. When a dragenter event over a dropzone occurs the silverlight widget,is positioned under the mouse cursor. When a file is dropped on to the widget the silverlight triggers
the standard drop event on the element.
- Checks whether the browser natively supports the File API
- Adds a silverlight object to the page and hides it by positioning it
outside the window view
- Adds ondragenter event to the window.document and
depending on...
- If the element contains the class "sldropzone"
- OR the element has an ondrop event defined which includes a
reference to "files".
Performs the following actions:
- The silverlight widget tracks the mouse path and persists under the users cursor
- Creates a javascript function called dropFile on the window
object which is used by silverlight to trigger the ondrop event
on the element - An example of which is in the "sample code" below.
Source
- slDropFile.js - The javascript to add to the page
- slDropFile.xap - The silverlight widget needs to be placed in the /ClientBin/slDropFile.xap
Sample Code
This page uses the sample code below.
As you may notice this is all standard HTML5 FIle API stuff to get this to work in all browsers you need to do four things.
Implement
- Copy source files above to your webserver
<script src="slDropFile.js"></script>
- Add script to the bottom of the page
(e.files||e.dataTransfer.files)
- Gets files from event object
holder.className = "sldropzone";
- Attaches the drop handler fix to the element
Error tracking
Todo: Silverlight installation version
Working with jQuery
jQuery wraps the original event object and makes it available at
e.originalEvent. This script does not recognise jQuery but does recognise the
ondrop event that was assigned by jQuery and will execute that when used.
However now the original event object is passed to the handler not the wrapped
up event object used in jQuery. But not to worry its easy to write code which can accomodate both approaches.
jQuery Demo
Drop file jQuery Demo
Browser Support
Browser |
IE9 |
IE8 |
IE7 |
FF3.5 |
FF3.6 |
Chrome 6+ |
Safari 5 (win) |
Safari 6 (win) |
Opera 10 |
File API / slDropFile |
slDropFile |
slDropFile |
File API |
File API |
slDropFile |
File API |
no1 |
- Silverlight does not run in Opera, nor does Opera support the File API
Why it was done this way, rather than...
- Make the Silverlight object transparent over element.
Answer: The Silverlight object needs to be in "windowless" mode for transparency,
however in this mode we lose the drag and drop UI. See http://msdn.microsoft.com/en-us/library/cc838156(VS.95).aspx
- Add drop functionality implictly to objects
Answer: So this is the Event Delegation vs Event Handling argument. Using Event Delegation we
add this to the document ondragenter event and explicitly add this to elements
which match a condition as the user drags over elements, thus avoiding
having to add functional code.
- Update e.dataTransfer.files instead of having to write
(e.files||e.dataTransfer.files)
Answer: The Event object dataTransfer is immutable therefore we can only pass in a bespoke method. This is only for IE8 and less, in IE9 we can define the dataTransfer files.