Drag and Drop Events - Drag and Drop - HTML 5 Multimedia Design

Chapter 3 HTML 5 Multimedia Design

3.5 Drag and Drop

3.5.1 Drag and Drop Events

HTML 5 came up with new feature called a Drag and Drop API . HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

3.5.1 Drag And Drop Events

There are number of events which are fired during various stages of the drag and drop operation.

These events are listed below:

Table 3.7 Drag and Drop Events

Events Description

dragstart Fires when the user starts dragging of the

object

dragenter Fired when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.

dragover This event is fired as the mouse is moved over

an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the drag enter event.

dragleave This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback.

drag Fires every time the mouse is moved while the

object is being dragged.

drop The drop event is fired on the element where

the drop was occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.

dragend Fires when the user releases the mouse button while dragging an object

Note: Note that only drag events are fired, mouse events such as mousemove are not fired during a drag operation.

36 3.5.2 Drag and Drop Demos

Drag and Drop Demo A: Keep Surrounding Clean

Demo description:

Here comes another cool feature of HTML5, DRAG and DROP. Through this, you can drag any element and drop it to the desired location. And I also create animated background with this drag and drop stuff. If I set this attribute to true, then the element can be dragged.

Function:

HTML 5 :

Here is an HTML 5 function for drag and drop

To make actual use of this feature, Have to learn about certain events Table 3.8 HTML 5 function for drag and drop

ondragstart This event is fired when user starts dragging a draggable object

ondrop Fires on the target object when the mouse button is released during a drag-and-drop operation.

ondragenter Occurs when the user click-drags an object on the page over and into a valid drop target

ondragover This event fires continuously while the user click-drags an object over a valid drop target.

37 Drag and Drop Demo B: Image Vampire Demo description:

I create application for giving some funny touches to an image. I use jQuery and query UI for dragging and resizing little bling elements like mustaches and glasses With PHP the image and the bling elements will get merged and the end result can be viewed.

Function:

HTML 5 :

The markup is pretty simple: I have a main container with the objects sidebar, the main image and the tools area:

</div>

The objects sidebar contains all the drag gable elements and the tools area show a list of all the used elements. In each item I use a slider to allow the rotation of the respective element. I also provide a delete icon to remove the element which is in Red Cross symbol.

Javascript :

The element images that are dropped onto the main image will be stored in the following object:

"images": [ {"id" : "obj_0" ,"src" : "background.png", "width" : "640", "height" : "480"}]]

Every time I drop a new image insert it into the “images” array.The images are resizable and draggable.

The background div, where the main image is inserted is droppable. Each time I drop an element into this container I add it to the data object if it is not there already. The most important parameters added are the width, height, top and left. The last two are calculated based on the difference between the absolute top or left of the container and the drag gable object.

If the element was already in the data object, meaning that the user keeps dragging it around, I just update the new top and left in the data object. I also set a new z-index to the dropped element, so that the last one dropped always stays on top. Besides adding to the object I also add a new element to the tools sidebar, where I will be able to rotate the corresponding image and also delete it from the container. When removing an element from the container, I want to remove it from the sidebar, from the data object and also add it again to the elements list.

PHP :

What I doing here is getting all the info for each image dropped into the main container, and merging it with the background image. If there was a rotation then I need to make sure I recalculate the top and left, since the PHP image rotate function is not that friendly and it scales down the image after rotation

Chapter 4 Simulation & Game Design

4.1 HTML 5 Canvas

The HTML5 <canvas> is another interesting feature. This can be used for rendering graphs, game graphics, or other visual images. The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.The <canvas> tag is supported in all major browsers. Such as Chrome, Opera, Safari, and Mozilla Firefox.

The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. So how to create Canvas Element have to Add a canvas element to the HTML5 page. For this have to Specify the id, width, and height of the element:

HTML 5 canvas tag has some attributes as follows:

Table 4.1 Canvas Attributes

Attribute Value Description

Height Pixels Specifies the height of the canvas

Width Pixels Specifies the width of the canvas

4.2 Physics Simulation

Using HTML5, the developer or designer can now create the Physics simulation using canvas tag. The HTML 5 Canvas element can handle all different types of physics. Such as Gravity, weight distribution, speed and acceleration. Developer can also create 2D a canvas element. User can use these physics simulation on browsers it is very interesting and useful.

40 Physics Simulation Demo A: Shoot Box

Demo description:

This is simple physics shoot box. In this demo I use HTML 5 canvas element. To create small rectangle box and we can shoot that boxes and separate it like simple physics demo.

Function:

Physics Simulation Demo B: Physics Box Demo description:

This demo Idea I take from box2djs by Ando Yasushi, It is little physics simulation engine made to run in JavaScript. The physics demos which can interact with by left clicking with the mouse to add new objects in Demo. They use the popular Box2D physics library to JavaScript using

<canvas> element for the rendering. Using Box2D JavaScript, they created a flatland-sequel 2D world that obeys Newtonian physics . First figure show original demo from box2djs by Ando Yasushi & second demo I created some new or extra stuff in that original demo to make it more usable and intresting. And I also create main background window bigger than original one .

Figure 4.1 Physics Box Part 1

Figure 4.2 Physics Box Part 2

Physics Simulation Demo C: Physics Adventure Demo description:

HTML5 is growing up faster than anyone could have imagined. Powerful and professional solutions are already being developed even in the gaming world! I make game using Box2D and HTML5′s canvas tag. When we play this game we have to use up & down arrow keys on keyboard to reach goal.

Function:

Step 1 - Developing the Game

HTML 5 :

In HTML 5 I use canvas element to show which id it is & how much height & width it is.

42 4. 3 Game

So what is HTML 5 game? It is basically plug-in free game development for various browsers.

For game development in HTML 5 we don’t care about, new semantic tags, Micro data but care a lot about Canvas, Video, Audio, Web sockets. Actually twenty years game development compressed down to two years due to new HTML 5 features. A game that does not require a browser plugin, this type of game is usually implemented fully using HTML 5 and JavaScript.

With the new HTML 5 <canvas> tag, creating a 2D game with the same picture quality with a Flash game is now possible. Firefox 3.0+, Google Chrome 3.0+, Apple Safari 3.2+, and Opera 9.6+ should already provide 2D rendering context with all the W3C-standardized basic canvas API. Internet Explorer up to IE 8 has not yet support the <canvas> tag.

With the new HTML 5 <audio> tag, playing audio natively in JavaScript-based game is now possible. Firefox 3.5+, Google Chrome 3.0+, Apple Safari 4.0+, and Opera 10.5+ should already provide full support for the <audio> tag. Internet Explorer up to IE 8 has not yet support the <audio> tag.

With the new HTML 5 <video> tag, playing video natively in JavaScript-based game is now possible. Firefox 3.5+, Google Chrome 3.0+, Apple Safari 4.0+, and Opera 10.5+ should already provide full support for the <video> tag. Internet Explorer up to IE 8 has not yet support the <video> tag.

Game Demo A: English Character Fall Demo description:

This is very intresting HTML 5 chrecter fall game [11], I have make some change in this game is that I increase speed and dropping orbs of this game to make more intresing and improve users typing skills and also change some stuff.

We have to press the correct character on the correct time in a totally random order. Each correct press will make the game faster, which makes it harder but we will be able to earn more points.It might help improve our typing skills too.

43 Function:

Container for the dropping characters that will be created by query

</div>

For the English character use

Game Demo B: Water Character Fall Demo description:

This game originally creates an actual jQuery game [12]. The author came up with the following idea: Characters in water drops falling. We can save them from a splashy death, by pressing the correct character on keyboard. Keeping that in mind, Author created jCharacterfall - A small, addictive jQuery game. After each character save, the game gets harder and the droplets will fall faster. When playing this game over and over, we might even improve our typing skills. This game combines the power of jQuery, jQuery UI, the jQuery Easing plug-in and CSS3.

It is more similar like previous demo originally created by other author and we have increased speed of this game to improve users typing skills.

HTML 5:

For each images in demo use <img> tag

44 Game Demo C: Fairy Jump

Demo description:

I design Simple game with HTML5 Canvas [12]. In the original reference demo the goal is to control little angel & jump on the two kinds of platforms - orange which is regular ones and green which is super high jump springboards. The game ends when the angel falls down to the bottom of the screen and gets scores. I have increase main window size and platforms size and number of platforms and color of platforms & many stuff inside demo .Below show figure part 1 is original reference demo and part 2 modified one .

Figure 4.3 Fairy Jump Part 1

Figure 4.4 Fairy Jump Part 2

Function:

Part 1 - Introduction & Background HTML 5 :

Because whole game, including images and scripts, couldn't be over 10K, I didn't want to use image on the background. It was cheaper to draw some generic-like stuff using canvas drawing functions. First of all we need little HTML5 , nothing special, just one canvas element with some unique id, little bit of CSS and JavaScript.

Game Demo D: Snake Game

Snake Game is a rather cute and cuddly HTML5 game [13]. The goal is to snake have to eat cherries in each levels and every level become more complicated and more hard, if snake eat cherries it will increase our game score. In original reference game they just create simple snake and wall, cherries .but I have change snake color, cherry and wall style to make it more beautiful for users. Below figure shows part 1 is original reference game and part 2 is I make change in it.

Figure 4.5 Snake Game Part 1

Figure 4.6 Snake Game Part 2

Chapter 5 HTML 4 vs. HTML 5

5.1 Comparison between HTML 4 and HTML 5 A. Comparison with HTML 4

W3C has considered approving a new set of standards that called HTML 5. The HTML 5 standards contain several new features that are not present with the previously W3C-adopted HTML 4 standards.

HTML5 has several goals which differentiate it from HTML4.The first one is error handling, HTML 4 has lack of rules of parsing so it is difficult to handle error. But HTML 5 has strictly parsing rules so it handles the error. The another main difference between is, HTML 4 has no multimedia supported without third party Plug-In. but, for HTML 5 multimedia element there is no more need third party Plug-In.

The secondary goal of HTML5 is to develop the ability of the browser to be an application platform, via HTML, CSS, and JavaScript. Many elements have been added directly to the language that are currently Flash or JavaScript-based hacks, such as <canvas>, <video>, and

<audio>.

For improve the structure of HTML pages, many elements have been added, changed, or removed. New elements include such as section, article, aside, h-group, header, footer, nav, figure, and many more. The list of changed elements includes such as a, b, address, cite, hr, I, label, menu, strong, large, and many more. Lastly, removed elements are elements that are no longer included in HTML 5, among them are basefont, big, center, font, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir, noscript. The reasons for dropping these elements range from disuse, obsolescence due to CSS, and usability issues. The removed elements can still be used as browsers would still be able to parse them, but using them on a page would cause it to fail HTML 5 validation.

In summary I can say HTML5 can natively incorporate content that needed plug-ins in HTML 4.HTML5 can use SVG and MathML inline while HTML 4 cannot.HTML 5 allows the storage and use of offline applications while HTML 4 does not.HTML 5 has many new elements that are not present in HTML 4.Certain elements have changed in HTML 5 compared to how they were in HTML 4.HTML 5 has dropped certain elements from HTML 4.

5.2 Browsers Comparison 1. Audio

The below table shows that how HTML 5 Audio element work in various browsers , as we can see first Audio demo works in chrome, opera & Mozilla but not work in safari , internet explorer.

And second demo doesn’t work in opera and internet explorer .

Table 5.1 Audio Browsers Comparison Browsers

Audio Demo

Chrome Safari Opera Mozilla Internet

explorer

Audio sample Yes No Yes Yes No

Audio color picker Clock

Yes Yes No Yes No

49 2. Video

The below table shows that how HTML 5 Video element work in various browsers , as we can see Video first demo works in Chrome, Safari, Opera, Mozilla but don’t work in Internet explorer. & second Video demo work only in Chrome not in other browsers.

In first demo Video tag doesn’t support in Internet explorer. And in second demo also except chrome other all browsers doesn’t support Video demo.

Table 5.2 Video Browsers Comparison Browsers

Video Demo

Chrome Safari Opera Mozilla Internet

explorer

simple Video player

Yes Yes Yes Yes No

basic Video Yes No No No No

3. Image

The below table shows that how HTML 5 Image element work in various browsers , as we can see Image demo first, second demo works in Chrome, Safari, Opera but don’t work in Mozilla ,Internet explorer. .And third Image demo work only in Safari, Opera not in other browsers. And In Image slideshow demo Chrome, Mozilla Firefox & Internet explorer browsers doesn’t work, in demo we can see HTML 5 Image tag is work but arrow function doesn’t work in this browsers.

Table 5.3 Image Browsers Comparison Browsers

Image Demo

Chrome Safari Opera Mozilla Internet

explorer

Photo stack Yes Yes Yes Yes No

Rotating

51 4. Drag & Drop

The below table shows that how HTML 5 Drag & Drop element work in various browsers , as we can see Drag & Drop first demo works in Chrome, Safari & Mozilla but not work in Opera, internet explorer because it doesn’t support drag & drop HTML 5 tag . And second demo work almost all browsers but doesn’t work in Internet explorer.

Table 5.4 Drag & Drop Browsers Comparison Browsers

Drag & Drop

Chrome Safari Opera Mozilla Internet

explorer

The below table shows that how HTML 5 Physics Simulation Demos work in various browsers , as we can see Physics Simulation all three demos work in almost all browsers except Internet explorer.

Table 5.5 Physics Simulation Browsers Comparison Browsers

Physics Simulation

Chrome Safari Opera Mozilla Internet

explorer

Physics Simulation Demo A

Yes Yes Yes Yes No

52 see Game all four demos work in almost all browsers except Internet explorer.

Table 5.6 Game Browsers Comparison Browsers

Game

Chrome Safari Opera Mozilla Internet

explorer

Game Demo A Yes Yes Yes Yes No

Game Demo B Yes Yes Yes Yes No

Game Demo C Yes Yes Yes Yes No

Game Demo D Yes Yes Yes Yes Yes

I tested out a few of the most popular browsers to see how ready they are for HTML5 features and this is what I found out. Chrome 10.0 was the big winner coming in at 301 points out of 400 possible. They have already implemented most of the functionality to be a compatible HTML5 browser. In addition, many of the features that are not added are partially added. So Google Chrome is definitely way out in front in the race for HTML compatible browsers. Firefox 4.0 is next in line getting 249 out 400 possible points. They are still missing a lot of key elements but got bonus points for the audio and video implementation as well as their parsing rules. Internet

在文檔中 HTML5多媒體設計之研究 (頁 34-0)