Tuesday, July 21st, 2009

Wouldn’t it be Swell to be able to drag and drop between Web and desktop

Category: Framework, HTML, JavaScript

Christophe Eblé has kindly written a guest post on Swell JS and his drag and drop manager that works with your desktop. Here he tells us more:

At Swell we were about to create a Drag & Drop Manager just like in other Javascript libraries such as Jquery, YUI, Mootools, Scriptaculous, but we were not really satisfied with this decision.

What motivated us to adopt another strategy is that we didn’t want to provide yet another simulated solution but instead a drag & drop library that would use the real power of the web browser.

We’ve been faced to a lot of problems and we are still struggling with API differences. The Pros and cons of using system drag&drop over simulated solutions:

Pros

  • Accuracy and performance, mouse move tricks to position an element under the pointer and detect target collision are things of the past, system DD is wicked fast!
  • system DD can be anything you like (simple images or complex dom nodes) and can interact within your browser window, the chrome (search field, address bar…) or tabs (if the browser allows it, FF 3.5 does it right) and even your OS.
  • system DD through the dataTransfer object can carry powerful meta information that are not necessary the dragged object itself, this can be arbitrary text (JSON data for ex.), urls and for the latest browsers complex data types see this
  • system DD has true DOM Events

Cons

  • Browser differences in this subject are a real pain, I couldn’t list all the oddities here :)

The drag & drop implementation in Swell is still at an early stage, and not officially released but here’s some details on what we’re working on.

  • Provide a single way to create native drag & drop objects in every possible browser
  • Provide setDragImage method on browsers that don’t support it yet
  • Provide a DD Manager that acts as a container for all drag and drop events on which you can place your handlers, cancel events, or quickly batch all the DD objects on the page. (useful when you deal with dozens of DD Objects)
  • Provide a way to associate complex metadata with each DD objects
  • Provide a way to easily create visual feedback for your DD Objects
  • Tight integration with our event library
  • and much more…

There’s a TRAC available on the project with a roadmap and release dates, a blog, and even a SVN repo that you can check out. Be careful, as I said above the library is still in heavy development and is missing docs! We are looking for any kind of help and just hope to receive massive feedback ;).

See some examples in action:

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:

javascript

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

Posted by Dion Almaer at 6:06 am
56 Comments

++++-
4.5 rating from 59 votes

56 Comments »

Comments feed TrackBack URI

Oh, I missed this.

“You’ve been an enormous help BTW, which is truly surprising.”

I don’t know why it’s surprising. I’m quite a bit more polite than you, which is astonishing.

Comment by eyelidlessness — July 28, 2009

@eyelidlessness:
“Why on earth are you “tripping over their lousy scripts at every turn on the Web” if you aren’t using their code?”

Because I have to *use* the Web like everyone else. These scripts typically get in the way. For instance, ever try to sign up for Reddit at 800×600? Try it and watch some silly jQuery “modal” foil every attempt until you adjust your monitor settings. That’s one fairly typical example. These sites usually eat my PC’s resources alive as well, which is very irritating as they don’t usually do anything special to justify such an intrusion. And, of course, turning scripting off is not usually an option (due to incompetent designs.)

“As a matter of fact, as far as I know I uniquely occupy this particular handle, whereas I use a fairly common name in “real” life, which itself is not my legal name (which I share with a highly paid professional athlete)”

Okay, fair enough, but couldn’t you have used a middle initial or something?

“Really? So, if a client requests a set of functionality, and they receive that functionality, the fact that jQuery was used would somehow invalidate receipt of that functionality?”

Yes, absolutely. The script is full of mistakes and constantly patched. For example, take any site built with jQuery 1.2x (lots of them in the last couple of years.) At some point, the developers realized they had designed a time bomb and rewrote large chunks of code that was too complicated for most of the sites to begin with. This placed an undue burden on the site owners who should not have had to upgrade and re-test such a beast in their site’s lifetime. And, of course, 1.3x (two strikes so far) is nowhere near competent at this point and the authors keep piling more junk on top of it. It’s positively ludicrous as proper cross-browser scripting techniques have been around for a decade. As with most of these scripts, they are designed to work in a handful of modern desktop browsers in their default configurations. That’s how they are tested and approved, yet the Web features a far more diverse set of environments. A good example would be IE6, which jQuery has never come close to handling properly. They talk about discontinuing support for it every other month. Odd for a popular browser that has been out for a decade. Also, try disabling ActiveX for the Web (a fairly common configuration in corporate environments) in any version of IE and watch half the Web break as jQuery falls flat on its face. Doesn’t get much more futile than that. And I don’t mean harmless script errors, I mean unusable documents as jQuery provides no mechanism for feature detection and progressive enhancement (save for a half dozen useless flags, which change meaning every other release and are largely ignored by app developers anyway.)

“And just happened to make such “follies” great successes in the process? That’s quite an unlikely coincidence.”

Depends on your perspective. Success is relative. I put it to you that jQuery, Prototype, etc. are miserable failures at what they set out to do. They do *not* make browser scripting easier. They only provide an illusion that fools the uninitiated (their target market.) How can anything that fouls up attributes/properties, IE without ActiveX, IE in quirks mode, etc. be considered successful in this area? They just multiply the complications, as evidenced in their support forums and the myriad examples detailed in CLJ.

“…who so far has demonstrated to me only that he knows the difference between properties and attributes…”

LOL. You are still on page one. Keep reading…

“What I saw on the linked archives was you yelling at a bunch of people, and those people being disinterested in dealing with your tone.”

You saw nothing of the sort. I’ve never YELLED at anyone there. As for disinterest, you seem to be cherry-picking the responses from jQuery fans, who were part of the problem, not part of the solution. Keep reading and you’ll find that many of them changed their tone over the years. This was hardly an overnight process. Many others agreed all along but were tired of arguing about jQuery and Prototype by the time I took up the cause. It’s all part of the public record for those who care to look…

This comment interface is making this conversation too hard to follow. In short, do some research. CLJ is an excellent place to start. Search for “jQuery” or “Prototype” or “MooTools” and read what other professionals have to say about them. It will scare you straight. ;)

Comment by DavidMark — July 28, 2009

I should add that searching for “Prototype” will be pretty futile. What an unfortunate name, especially considering its attempts to implement *classical* inheritance in JS.

Comment by DavidMark — July 28, 2009

“Because I have to *use* the Web like everyone else. These scripts typically get in the way. For instance, ever try to sign up for Reddit at 800×600? Try it and watch some silly jQuery “modal” foil every attempt until you adjust your monitor settings. That’s one fairly typical example. These sites usually eat my PC’s resources alive as well, which is very irritating as they don’t usually do anything special to justify such an intrusion. And, of course, turning scripting off is not usually an option (due to incompetent designs.)”

I guess I misunderstood. You’re tripping over their louse applications. I thought you were actually reading their scripts and busting a vein in your forehead.

Sure. Eye C Lidlessness. 9_9 Seriously, accept the fact that you’re not entitled to know personal identification details of people you interact with in an anonymous context.

“Yes, absolutely.”

You’re kidding. So, if a client pays a developer to develop functionality, and that functionality is developed and works, the client got ripped off because there’s a library you don’t like in use? Really? Really? Doesn’t, um, the fact that the functionality works count for a heck of a lot more than whether or not you like jQuery?

“[a whole bunch of unsubstantiated claims about the ins and outs of jQuery internals]”

“Depends on your perspective.”

You’re claiming that JS has become popular quite despite the libraries that have become *popular* in the course of JS becoming popular. That is the meaning of success that I’m discussing. How is it possible for JS to become popular quite despite the libraries that became popular in the course of JS becoming popular? Thinking about it again, it’s not just an unlikely coincidence, it’s a logical impossibility. On the question of whether these libraries propelled or hindered JS’ popularity, the success of other pursuits of those libraries is beside the point.

“LOL. You are still on page one. Keep reading…”

I’m still waiting for a compelling reason. Not to mention a link to your library and some documentation of other library authors grabbing code from it. Still waiting.

“You saw nothing of the sort.”

Oh. 9_9

Comment by eyelidlessness — July 28, 2009

WordPress eats content. :(

Comment by eyelidlessness — July 28, 2009

@DavidMark

I think you could get your points across better here by requiring less effort of your readers. It’s true that you and others have made many well-reasoned criticisms of jQuery and other libraries on CLJ that can be accessed by searching the archive. However, it takes a lot of effort for someone new to CLJ to get to the nub of the technical arguments in amongst all the other stuff, and many people simply will not bother.

One thing CLJ proves is that you spend *a lot* of time arguing against libraries like jQuery. Who do you want to influence? If you want to influence more people, then perhaps you could write an article or articles with your criticisms and publish it/them on the internet. That would be something you and others could point people to, which would in the end save you time and effort.

Finally, your ‘My Library’ was something public that backed up your credibility and the fact that you have taken down the public site for it is unfortunate, though I’m sure you had your reasons.

Comment by timdown — July 28, 2009

Leave a comment

You must be logged in to post a comment.