Minneapolis based web design and development

A blog on design, usability, ajax, xhtml, css, and javascript

Drag to Download

February5

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.

posted under JavaScript
15 Comments to

“Drag to Download”

  1. On February 6th, 2007 at 7:33 pm Eric Johnson Says:

    Cool technique. I have seen this before and was wondering how it was done. You made it very easy!

  2. On June 4th, 2007 at 12:27 pm Jimy Says:

    Cool simple example. I will write about this at miniajax.com

  3. On June 5th, 2007 at 7:42 am ryan Says:

    Great, I will look for it.

  4. On August 2nd, 2007 at 3:46 am force Says:

    the demo doesn’t works in IE6. but in FF2 this is cool.

  5. On August 2nd, 2007 at 10:33 am andrisp Says:

    Looks good, but I don’t seen any AJAX in this method.

  6. On August 3rd, 2007 at 2:25 am Philippe Says:

    Great script.
    Too bad it doesn’t work with IE.

  7. On August 3rd, 2007 at 9:14 am ryan Says:

    You may want to look into prototype/scriptaculous to see if there are any known issues with Drag & Drop and IE6/7.

  8. On August 9th, 2007 at 5:48 am Philippe Says:

    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

  9. On August 12th, 2007 at 9:44 pm Nakul Goyal Says:

    Very cool idea, this ignites a solution to a client problem I had almost 2 years back. :) Thanks.

  10. On September 9th, 2007 at 10:43 pm Seich Says:

    wow i love this script thanks alot for making it ;)

  11. On February 5th, 2008 at 7:20 am tom Says:

    Where can i get this from its so cool!

  12. On March 19th, 2008 at 12:49 pm El Developer Says:

    eso no funciona !
    not work this example, have an error.

  13. On April 20th, 2008 at 1:47 am none Says:

    thanks …

  14. On August 31st, 2008 at 2:18 pm Alex Says:

    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”;
    }
    });

  15. On December 10th, 2008 at 1:47 am hanks Says:

    very nice design ..

    you should visit http://jerrydeta.com/blog/

    no comment any further.

Email will not be published

Website example

Your Comment: