Mootools Drag & Drop & Download

Over recent months I have moved over to using the  mootools javscript library for all my javscript needs.
However, this has not stopped me from helping out when I can on the dhtmlGoodies forum with the scripts there and general javascript questions that users ask there.

Drag & Drop & Download

A couple of days ago somebody post a request about using drag&drop scripts to activate a download.  As an example, they posted a link to Ryan Scherf’s drag & drop download script using the prototype library.
I liked the look of this and, always up for the challenge, wanted to have a go at doing the same using Mootools.

I ended up with quite a simple script that does the trick (and works on IE) and decided to share it.

See the demo

Here is the mootools code that I used:

window.addEvent('domready', function() {
 var dragElement     = $('drag_me');
 var dropElement     = $('drop_box');
 var start_position    = $('start_position');
 var myDrag = new Drag.Move(dragElement, {
 // Drag.Move options
 droppables: dropElement,
 // Drag.Move Events
 onDrop: function(el, dr) {
 if (!dr) {
 }else {
 dr.highlight('#667C4A'); //flash the download box
 //alert("downloading...");
 window.location.href="drag_drop_download.zip";
 };
 },
 onComplete: function(el) {
 new Fx.Move(dragElement, {
 relativeTo: start_position,
 position: 'topleft',
 transition: Fx.Transitions.Elastic.easeOut,
 duration: 1000
 }).start();
 }
 });
});

Post to Twitter

chris@cbolson.com

No comments yet.

Write a comment: