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.
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.
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(); } }); });