Drag to Download
I was recently directed to a link for a new Putty.exe client which had some extra options like minimizing to the system tray and window transparency. Upon visiting the site, I saw a new technique I have seen before. It is a drag & drop type download system where you drag an icon over another, then the download immediately starts.
I realized this would be easy with the onslaught of the prototype.js and scriptaculous frameworks. The example uses the built in Ajax drag & drop for Draggables / Droppables included in scriptaculous.
Here is an example: Drag & Drop Demo
I have tested this in modern browsers, IE7, FF2, and Opera9. I am aware that this DOES NOT WORK in IE6/7 however it seems more of like a scriptaculous/prototype bug rather than my code, as I am only using the frameworks. I will post more if I resolve the issue.
Update: This page has been posted on multiple “AJAX widget” sites and there has been multiple comments about this script not containing AJAX. It is true, that the Title of the post was formerly (Drag to Download with AJAX) as it was part of an older post/technique I had planned to build to integrate this Drag to Download with some AJAX calls. As you can see, I haven’t updated this page in quite some time and hadn’t noticed the incorrect Title. I have changed it, so hopefully the flaming stops.
Cool technique. I have seen this before and was wondering how it was done. You made it very easy!
Cool simple example. I will write about this at miniajax.com
Great, I will look for it.
the demo doesn’t works in IE6. but in FF2 this is cool.
Looks good, but I don’t seen any AJAX in this method.
Great script.
Too bad it doesn’t work with IE.
You may want to look into prototype/scriptaculous to see if there are any known issues with Drag & Drop and IE6/7.
no thanks! I’m not a coder.
And my comment wasn’t a a criticism.
I was just tryin to say it’s a pity.
You’ve done a smart job, ryan.
Best regards,
Philippe
Very cool idea, this ignites a solution to a client problem I had almost 2 years back.
Thanks.
wow i love this script thanks alot for making it
Where can i get this from its so cool!
eso no funciona !
not work this example, have an error.
thanks …
Hi,
How i should put the code if i want to add several items to drag and several downloadboxes, and i want to drop that items in any downloadbox ?
i tried this way but it doesn’t work.
new Draggable(’drag’,{revert: ‘true’, constraint: ‘horizontal’});
new Draggable(’drag_1′,{revert: ‘true’, constraint: ‘horizontal’});
i = 1;
Droppables.add(’drop’, {
accept: ‘item’,
hoverclass: ‘hovered’,
greedy: ‘false’,
onDrop: function() {
$(’status’).innerHTML = “Downloading file..”;
$(’drop’).getElementsByTagName(”img”)[0].src = “trash_full.png”;
$(’drop_1′).getElementsByTagName(”img”)[0].src = “trash_full.png”;
window.location.href=”test.zip”;
}
})
(’drop_1′, {
accept: ‘item’,
hoverclass: ‘hovered’,
greedy: ‘false’,
onDrop: function() {
$(’status’).innerHTML = “Downloading file..”;
$(’drop’).getElementsByTagName(”img”)[0].src = “trash_full.png”;
$(’drop_1′).getElementsByTagName(”img”)[0].src = “trash_full.png”;
window.location.href=”test.zip”;
}
});
very nice design ..
you should visit http://jerrydeta.com/blog/
no comment any further.