HTML5 Part 1: Drag And Drop

In this first part of my postings on HTML5 I will focus on what I know and have experimented with in regards to HTML5’s Drag and Drop. (Updated 05.25.2010)

What is HTML5?

HTML5 is a web standard in development by the Web Hypertext Application Technology Working Group since 2004 and the World Wide Web Consortium since 2007. HTML5 will replace HTML 4.01 and xHTML. For those that don’t know, HTML is the basic language used to create web pages. The emphasis for HTML5 is to add Rich Internet technologies into HTML negating the need to depend on Adobe Flash for video or heavy scripting/frameworks for things such as editing content directly on a web page or using Drag and Drop.

Before I start, I want to briefly address the tit-for-tat going on between Apple and Adobe.  To summarize my point: BORING. The web community needs the Church of Apple and it needs Adobe. What it doesn’t need is each company throwing around buzzwords such as “open” to rile up zealots on either side. That crap is already boring and past the “detrimental to society” line in the States (think “socialism”, “gay” and “illegal immigrant”).  Let’s move on, please.

Drag and Drop

Where it works

The purpose of this posting is to help call attention to emerging web standards that are currently being worked on. Regardless of what Steve Jobs may allude to, HTML5 is currently in Draft State. While you can use some of  HTML5’s tech in certain browsers, it’s should be known that some features of Drag and Drop do not work in every browser. In some cases, such as Opera, Drag and Drop does not work at all. So, it would be irresponsible to trumpet HTML5 as the savior of our CPUs because the fact remains, HTML5 is far from ready.

This is the my HTML5/CSS3 test area. At the top, I have listed the browsers I am currently testing with. Where are IE6 and IE7 you ask? I am not interested in developing anything for either of those browsers. As reported on Ars Technica last month, the percentage of users using IE6 as opposed to those using IE7 is not small. The “Internet Explorer usage by version” chart show that IE6 is beating out IE7 18.41% to 13.16%. Why are so many users using a 9 year old browser? I haven’t got a clue and quite honestly, I no longer care. Companies can make up whatever excuse they like but they’ve had 9 years and two newer versions of Internet Explorer to change. Even, Microsoft has been telling people to stop using IE6. While things are looking up for the internet with the coming of IE9, I’m still not hopeful that people will change. Meanwhile, my job remains a difficult one because the space separating the major browsers (Firefox, Safari, Chrome, Opera and IE) supporting different things has grown even larger. While the first four add support for emerging technologies with constant updates, Internet Explorer seems to be the only one that does not receive support for web tech with updates. That is, unless it’s a new major version (IE5, 6, 7, 8, 9… etc.). Plugging the billion security holes is nice but how about finally adding new web tech with those updates?

And now, on with the show…

Drag and drop image

If you click on “Gophanet splash page”, you will see a carbon copy of what appears at gophanet.com. You can drag the red ball with the gopha logo to either the left or right of the light green container with the rounded corners. You can also drop the image back into the container. This is HTML5 Drag and Drop at it’s simplest. Here’s how it works:

I have three div containers floated side by side within a larger “wrapper” container div. A lot of Drag and Drop has to do with element attributes. The HTML code all three divs looks much like this:

<div id="indexLeftContainer" ondrop="drop(this, event)" ondragover="return false"></div>

You need ondragover=”return false” in order for ondrop to work. Next this is the code that makes the image draggable.

<img src="index_logo.png" style="border:0px; margin-top:10px;" alt="Gophanet" id="gophanetLogo" ondragstart="drag(this, event)" />

Easy enough so far, right? To make the image draggable, use the ondragstart attribute and call your JavaScript function. Is that all, you ask? Yeah but if you are dragging an image in Safari, instead of say a DIV, you need to add this CSS code to your stylesheet:

[draggable=true] {
-khtml-user-drag:element;
}

Yeah, this is a little stupid and I hope that eventually this CSS declaration won’t be needed in Safari as time goes on. If you do not use this CSS code, the image is replaced with a smaller image (instead of a ghost image) until the drag and drop is completed.

Now, this is where the whole thing becomes even more funky. Because in order to move the image from one container to another, you need some JavaScript to tie it all together. Yeah…

function drag(tgt, e) {
e.dataTransfer.setData("Text", tgt.id);
}
function drop(tgt, e) {
var elemId = e.dataTransfer.getData("Text");
tgt.appendChild(document.getElementById(elemId));

if(e.preventDefault) {
	e.preventDefault();
}
}

So, in order to achieve a simple HTML5 Drag and Drop you need a little bit of JavaScript. I thought that they were working on updating the HTML specification?

As you can see above, you can drag an element from one container to another by creating a function that captures both the drag event and the element that is being dragged: ondragstart=”drag(this, event)” –> function drag(tgt, e) {js code here}.  The dataTransfer() object hangs on to data that is being moved in the event of a Drag and Drop. The setData() method tells what type of data is being transferred. Using the Text value allows you to hang on to the element id in the dataTransfer() object.

When you add the ondrop attribute, you can call whatever function you wish to call when you drop an element: ondrop=”drop(this, event)” –> function drop(tgt, e) {js code here}. In order to drop an element into another one, a function has to be created and called in order to grab the data that the dataTransfer() object is holding onto. Using the getData() method you can establish the data type – “Text” in this case – and declare it in a variable. From there you can use appendChild() to attach the element you just dragged. Pretty easy, but I’m not happy about the JavaScript use.

Using the preventDefault() stops the default action (the action that has already been built into a browser prior to HTML5 Drag and Drop) from occurring.

Attribute Testing

I tested these attributes by using a basic function that used innerHTML to write “Hi!” into a div.

Ondrag: The function executed repeatedly for as long as it took to drag the element from the source element to the drop element. You can use ondrag with a parent element. The function executed when I dragged the child element.

Ondragend: The function executed once the drop operation completed. Ondragend could only be used in concert with ondrop and ondragstart. Ondragend cannot be used as a replacement for ondrop.

Ondragleave: The function executed once the element was dragged outside of/left the source element.

Ondragover: The function executed repeatedly every time the element was moved over the drop element.

Ondragstart: The function executed when the element was first dragged.

Ondrop: Besides ondragstart, ondrop will probably be the most used attribute. The function did not execute until I dropped the element into the drop element. It is important to note that ondrop will not work without ondragover declared (ondragover=”return false”).

Draggable: This can only be set to either true or false. (This attribute is not necessary in order for an IMG element to be dragged. In fact, using ondragstart pretty much negates the need for this attribute in an IMG element.)

Some notes

  • As you can see on the main testing page. This simplest of the current HTML5 Drag and Drop draft does not work in Opera 10.53. I’m sure it will eventually work there. Maybe Opera is waiting for the draft to become a little more refined.
  • Currently in Firefox, Safari and Opera, when you drag an image anywhere within the browser, it makes a ghost image of that image. In HTML5 Drag and Drop, you can declare an alternate image when you drag the image. If you look at the “Gophanet splash page” source code, I have commented out the code for the drag image. I have chosen not to use it because the positioning for the drag image is not working correctly.
  • In the “Drag to form” example, I was not able to drag a company in Internet Explorer without considerable effort. Also, in Safari, you need to click a part of the company container that does not have any text in it, in order to drag it. Otherwise, all it does is highlight the elements. The same thing happens in Internet Explorer however, the Safari solution does not work in IE.
  • The fade I used with the “Drag to form” example does not work in IE (probably a simple fix).

In conclusion

It should be obvious to you by now that HTML5’s Drag and Drop is not ready. While it works well, if you choose to use it, you need to keep track of any changes made to the specification. I will try to keep track of it and make changes to this post when necessary and when I can. It’s become harder to babble on this blog because my baby daughter requires my attention. 🙂

Advertisements

About gopha

Gopha is a web programmer, techie and heir to several Nigerian fortunes. In his spare time he likes to game, spend time with his wife, daughters and dogs. He eats [far too much], watches TV and lift weights. He also like to take moonlit walks on the beach and sing songs next to a roaring campfire, in a white sweater with his acoustic guitar. View all posts by gopha

One response to “HTML5 Part 1: Drag And Drop

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: