Bridging desktop and browser with Swell’s native Drag and Drop implementation « SwellJS

Error: Unable to create directory /var/www/vhosts/justswell.org/subdomains/blog/httpdocs/wp-content/uploads/2013/06. Is its parent directory writable by the server?

by admin

17 Jul 09

Bridging desktop and browser with Swell’s native Drag and Drop implementation

Posted in DD, Swell

Don’t miss the other article of our Drag&Drop series http://blog.justswell.org/drag-and-drop-files-from-your-desktop-to-your-browser-using-javascript/

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&amp;format=json&amp;callback=moo';
    html.script({
        'type' : 'text/javascript',
        'src'  : yqlRequest
    }).appendTo(document.getElementsByTagName('head')[0]);
}

And the full video.

Tags: dataTransfer, dd, desktop to browser drag & drop, drag&drop, javascript dd, native dd

This entry was posted on Friday, July 17th, 2009 at 12:05 pm and is filed under DD, Swell. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

15 Responses to “Bridging desktop and browser with Swell’s native Drag and Drop implementation”

1
Freshyz Says:
July 17th, 2009 at 1:39 pm
Nice work !
2
Friday video bonus: Swell’s native Drag and Drop implementation « Position Absolute Says:
July 17th, 2009 at 8:17 pm
[...] More information here. [...]
3
stoimen Says:
July 21st, 2009 at 12:27 pm
Very very good! Nice work.
4
Swells’ Drag and Drop manager – Interacting easily between desktop on web app Says:
July 21st, 2009 at 2:29 pm
[...] SiteMap July 21, 20095:29 am Swells’ Drag and Drop manager – Interacting easily between desktop on web app Swell’s Drag and Drop application let you interact from within your desktop. “The video below, shows a simple yet powerful application to import a RSS feed in your webpage. The classical way’s to type in the feed URL and then getting redirected to it, which commonly takes 3 to 5 steps. With this implementation you just’ve to drop the rss icon onto an appropriate target and that’s all! We use YQL and JSONP to transform RSS into JSON and of course a Swell Element to dynamically attach the behavior to the webpage,” Christophe Eblé. [...]
5
Proc#curry | Chain Links #005 Says:
July 21st, 2009 at 6:09 pm
[...] Bridging desktop and browser with Swell’s native Drag and Drop implementation A newish javascript framework that has a lofty goal of providing cross-browser drag & drop support between browser and desktop. Looks like they are making progress. Filed under: Uncategorized [...]
6
Sullof Says:
July 21st, 2009 at 8:06 pm
Great!
7
warpik Says:
July 21st, 2009 at 9:43 pm
I love the DD. Keep up the good work, can’t wait to get my hands on this!
8
ynw Says:
July 21st, 2009 at 11:13 pm
Wow!
9
madipta Says:
July 24th, 2009 at 12:05 pm
WOW!

we could do that using only javascript.!?

WOW!
10
Pat Says:
July 28th, 2009 at 8:57 am
Hey,
nice showcase but i got a question left. Like the guy before me asked, we could do that using only JavaScript? Or do you use Yahoo’s Browser Plus?
11
Butterfish Says:
July 28th, 2009 at 10:05 am
We are only using JavaScript for this example.
12
Иван Милюков Says:
December 26th, 2009 at 8:30 pm
Хм, к размышлению…
13
Sea Fishing Gran Canaria Says:
November 12th, 2011 at 10:16 am
Sea Fishing Gran Canaria…

[...]Bridging desktop and browser with Swell’s native Drag and Drop implementation « SwellJS – another big fish in the sea[...]…
14
SEO Says:
April 2nd, 2013 at 7:03 pm
hi!,I love your writing so a lot! percentage we keep up a correspondence extra about your article on AOL? I need an expert on this house to unravel my problem. Maybe that’s you! Having a look ahead to see you.
15
http://mail.annalindhforum.org/trends/report/2010/behaviours-interactions-praxis-dialogue-sara-silvestri Says:
May 5th, 2013 at 11:34 am
You actually make it seem so easy with your presentation but I find
this topic to be actually something that I think I would never understand.
It seems too complicated and very broad for me. I am looking forward
for your next post, I’ll try to get the hang of it!