SwellJS – another big fish in the sea

Today is a big step forward for us, we are proud to feature the first showcase of our Drag&Drop implementation.

This is not what you may think about, you may think about drag & drop as being stuck inside your browser window but today what we’re going to show is a new way of conceiving drag & drop applications. The one you have always waiting for, imagine interacting with the browser chrome and your OS…

In the video, we are providing a simple yet powerful application to import a RSS feed in your webpage. The classical way is to type in the feed URL  and then getting redirected to it, which commonly takes 3 to 5 steps.  With this implementation you just have to drop the rss icon onto an appropriate target and that’s all folks!

We use YQL and JSONP to transform RSS into JSON and of course a Swell Element to dynamically attach the behavior to the webpage.

Here’s the Javascript code to handle this.

var dd2 = new Swell.Lib.DD.Droppable('moo');
 
dd2.ondrop = function(e) {
    var file = this.getData(e, 'DD_URL').split("\n")[0];
    if (/^http\:\/\//i.test(file) !== true) {
        return false;
    }
    $('debug').setHTML('loading…');
    e.target.className = '';
 
    var yqlRequest = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url=%22'+file+'%22&format=json&callback=moo';
    html.script({
        'type' : 'text/javascript',
        'src'  : yqlRequest
    }).appendTo(document.getElementsByTagName('head')[0]);
}

And the full video.