On the whole, I tend to be fairly loyal in media technologies.  I do what I can to support Adobe –I use ColdFusion, the Adobe Creative Suite , and I have even blogged several posts about Adobe's cool javascript framework, Spry .  However, sometimes loyalty doesn't cut it.  Every once and a while one will run across a problem that requires a certain solution, and said solution cannot be had in such a way that loyalty can be maintained.

Such happened to me recently.  I have been developing an application at work that will be using a drag-and-drop feature.  Being the loyal Adobe fan that I am, I went immediately to Adobe's Spry framework to search out an answer.  Unfortunately, Spry does not currently include drag-and-drop functionality.  As an aside, this is not something accidental.  I found a thread from a few months back (Spry 1.5 era) in which this functionality was requested.  The powers-that-be responded that they did not see enough use cases in which this kind of functionality would be needed.  Although the thread participants presented a good number of suggested use-cases, Spry 1.6 is conspicuously missing this functionality.  

So…what do you do when your go-to framework doesn't have what you need?  You cheat on your lover.  

For a while, I have known about (and…shhh!…) used MooTools ' extremely fun framework.  It is simple to implement and has a lot of fun special effects stuff.  For regular visitors to this site, you may have seen it in action on the green circles in the logo of this site (go ahead, you can grab them).  So anyway, I checked out the actual drag and drop functionality…it worked great!  

Here is the code that I used to instantiate the drag functionality:

function startDrag() {
    var fx = [];
    $$('#draggables div').each(function(drag){
        new Drag.Move(drag);
    });
}

Pretty simple, eh?

Then, I wanted to be able to let the user add x number of draggable elements, so I created another function that would add an additional div with a class of whichever color the user selects:

function createShape(color) {
    var newDiv = document.getElementById('draggables');
    var myCode = document.createElement("DIV");
        myCode.setAttribute('class',color)
        newDiv.appendChild(myCode);
        startDrag();
}

This function is very simple.  It accepts a single argument, "color".  It then identifies the parent element (here "draggables" div) and creates a new childNode div with a class of the argument that is passed to function.  (I have additional CSS rules to determine the attributes of each created div class.)  Finally, I reinvoke the startDrag() function to apply the drag to the newly created element.

I still really love Spry, especially for the data management side of things, but MooTools has some really incredible effects.  Maybe Spry will get their act together on 1.7 and include some cooler effect widgets like drag-and-drop. 

Oh yeah, forgot to mention:  this code will soon be part of an interesting little thing I'm cooking up for this site, so stay tuned! 

Click here to see an example of this code in action: