Custom Home: Implementing Drag and Drop
I had decided to try implementing functionality into CustomHome to allow the user to drop things into (parts of) the page, in an effort to help simplify the GUI. It was a nice idea, but a little difficult to implement for unfortunate reasons.
I don’t know how you do new things, but for me it has almost always started at Google. This time, actually, meant something other than a search. I knew that the functionality that I wanted existed in both Google Docs and Google Mail, so I switched to my Gmail tab and hit “inspect element”. Long story short, the Google Apps code is incredibly complex, and I am not going to be able to just root around willy nilly in that. So, off to Google Search I went.
Unfortunately, an improper search will yield results for jQuery UI’s drag and drop functionality, which is re-arranging positions within the DOM, not dropping files from the machine. A search for gmail-like drag and drop, however, yields some results.
I’ll need to come back to this post at some point and actually put good code in here, but for now, I’ll just lazily link to An excellent online reference, StackOverflow and a really good jsfiddle.
Once the basic functionality for drag and drop was implemented, I was able to look into the file type information sent by the headers, and do one better by preforming different actions with different file types. On the horizon, it will be easy enough to take this a step further and have context-sensitive file-type-specific drop events, though I’ll need to work out obvious visual cues for that, which will take some time. For now, I realized that I could pick out files that were plain text, image, and links (they had to be link files on the system, though. more on that below).
As links were quite obviously the functionality of the custom buttons, I made any of those that get dropped create a new button. Text files would pop up notes on the page, and dropped images would change the background image. I still have yet to go in and actually implement file uploading, so for the time being, dropped background images only stay as long as the page is open.
The final unfortunate limitation, which I have still not found a workaround to, is that dropping links from Chrome (instead of .url files from the system) just redirects the page as if the link were dropped on any open tab. I haven’t tested in other browsers, but I’d be willing to bet the behavior isn’t any better in any of them.