In essence this means that if you want to make for example a datatable with a lot of rows without attaching events to them (remember the flyweight pattern?) you’ll only need to set your draggable element at a higher level in the hierarchy to get the DnD behavior applied on all children nodes (marked with the draggable attribute), that’s powerful and of course, reduces a lot the memory footprint of your web application.

A lot of components could benefit of this approach, Treeview, Datatable, Listview and so on.

Another part of the example shows another level of interaction between the browser and desktop, and we are sure this one will get a lot of attention and excitement!

And the code

var proxyElement = html.div(null, html.span({
    'cls' : 'dd-proxy-icon'
}), html.span('Moo'));
 
 
var draggableRows = new Swell.Lib.DD.Draggable('bleh', {
    'delegate' : true,
    'proxy'  : true,
    'proxyOverride'    : proxyElement,  
    'dataCallback' : function(dt) {
        var _currentEl = this.getDragEl().current(), _stdOut = [];
 
        for(var _n = 0, _l = _currentEl.childNodes.length; _n < _l; _n++) {
            if(_currentEl.childNodes[_n].nodeType === 1) {
                var _text = $(_currentEl.childNodes[_n]).text();
                _stdOut.push(Swell.Core.trim(_text));
            }
        }
        this.setData(dt, 'text/plain', _stdOut.join("\t"));
    }
});
 
var dropTarget = new Swell.Lib.DD.Droppable('moo');
 
dropTarget.ondrop = function(e, draggable) {
    if(!!draggable) {
        draggable.getDragEl().appendTo($('moo').current().tBodies[0]);
    }
}

The mechanism behind is quite simple:  the Ajax library, the DOM element wrapper and the Asset component are assuring most of the work (handling the upload and the callback process), the DDM detects the dragged files,  then your browser is doing the rest, defining the interaction between your desktop and the file input (nicely styled of course).

By now, two browsers are playing well with the demo (Safari 4, Chrome 2+)  while others degrades gracefully.

Here’s the code :

Swell.Core.Event.add('upload', 'change', function() {
    $('loader').show();
    $('foorm').xhr(function() {
        var currentEl = $('upload').current();
        $('filelist').show();
        for (var i = 0, len = currentEl.files.length; i < len; i++) {
            $('filelist').appendHTML(currentEl.files.item(i).fileName + '
');
        }
        var imgs = this.responseText.split('|');
        new Swell.Core.Asset().load('img', imgs, function(img) {
            $('loader').hide();
            $(img).appendTo('image-container');
        });
    });
});

The demo:

And the video:

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.

The Swell guys tries to set high standards in terms of code quality and usability, but first and foremost, always think about the future of web appps and how they can ease the process of using these features in your fav browser today.
That’s why we are working on the first native Drag & drop implementation in a Javascript library, just think about the possibilities of making the web interacting with your desktop…

We are also working on WebSockets implementation in Swell using XMLHttp Streaming, this will talk to Comet fans