Drag and Drop in HTML5

Transcription

1 Drag and Drop in HTML5 T Seminar on Media Technology B P Final Report Hannu Järvinen Department of Media Technology Aalto University, P.O. Box 15400, Aalto hannu.jarvinen@aalto.fi Abstract HTML5 is currently a working draft at the W3C. It defines numerous new functionalities and thus offers interesting possibilities for the web developers to create rich web applications. One of the new features in HTML5 is the support for Drag and Drop. It can be used to implement applications that give similar experience for the user than traditional native desktop applications. Supporting drag and drop in browsers thus brings web applications closer to the traditional applications transforming the browser more and more into the basic programming environment for the future applications. Introduction The development of HTML has not been straightforward. The first version of HTML was created in 1990 and the current version, HTML 4.0, was standardized by the World Wide Web Consortium (W3C) in However, this language was not based directly on extensible Markup Language (XML), but on more flexible Standard Generalized Markup Language (SGML). W3C started to work on the well-formed, XML based version of the language and came up with the XHTML in The work was continued by developing the following XHTML 2.0 language. When W3C was working on the XHTML 2.0, the Web Hypertext Application Technology Working Group (WHATWG) began to develop the new SGML based version of the HTML in Finally, in 2009 W3C discontinued the work on XHTML 2.0 and joined the WHATWG on the effort of creating the HTML5. Now, the organizations are working together towards developing the standard.

2 In addition to the markup, HTML5 describes a number of Application Programming Interfaces (APIs) and many of the new functionalities are to be used with JavaScript. Thus, it actually seems, that part of the new standard is implemented as JavaScript libraries integrated in browsers and these functionalities can be used only with JavaScript. This can be interpreted as the final acceptance of the JavaScript as an essential part of the web programming by the standardization organizations. One of the new features in HTML5 is the support for Drag and Drop [1]. As the name describes, it can be used to drag and drop objects in the browser. It also supports dragging and dropping between different tabs and windows and from and to the desktop and other applications. It thus brings web applications much closer to the native desktop applications as simple and flexible interactions using the mouse or touch are possible. Drag and drop with other important HTML5 features also facilitates the rise of Web operating systems [2]. This report gives a short introduction to the Drag and Drop in HTML5, describes how it can be used, presents existing implementations, and envisions possible future applications. Drag and Drop Drag and drop has already been a relatively long time part of the basic Human-Computer Interaction (HCI) in graphical user interfaces. Apple and Microsoft included it as part of their operating system features in the late 80s and early 90s. While it was very popular among users in basic operating system operations and implemented and widely used in many third party desktop applications, it was not until 1999 when Microsoft implemented it in Internet Explorer 5 [3]. To implement drag and drop in HTML5, a HTML5 editor Ian Hickson reverse engineered and documented the API that was implemented in Internet Explorer, and that time also in Safari browsers [3] [4]. This history explains why the API in HTML5 is not as simple as it could be but rather the opposite. Because of the messy implementation, Remy Sharp describes drag and drop as a black sheep of HTML5. However, the standardization organizations do not want to start fighting against the existing implementations but rather accept that leading browsers are actually the ones to determine how and which features are implemented [3]. Drag and Drop in HTML5 Drag and drop in HTML5 basically offers a way to transfer data between different elements or applications. As described earlier, the API is unfortunately not as simple as it could be. A datatransfer object with getdata() and setdata() methods is utilized for the data transfer, which can occur inside an application in a web page, between different browser windows, or between a browser window and a native desktop application. An example application is described here to understand the basic functionality (Figure 1). For simplicity, this example describes an application that actually works in current browsers (tested in Firefox and Chrome), not an application that would directly follow the specification. Thus, the additional requirements by the specification do not necessarily exist in the code but are only explained.

3 Figure 1: An example drag and drop application where images on the top can be dragged to the drop zone below. In the example application, user can drag images of different fishes and drop them to the drop zone. When an image of a fish is dropped to the drop zone, a small icon of the fish appears on the drop zone with the name of the fish. A source code of the page can be seen in Listing 1. The application consists of four image elements, an empty div element, and a couple of lines of JavaScript. Images are the objects that can be dragged to the div element and dropped. In the code, the only addition to the image elements is the definition of the ondragstart attribute, which is defined to call the setdata() function. The specification additionally suggests on adding a draggable attribute and setting it to true. This, however, is not necessary as it seems that the browsers do not search for it. For the drop zone, things are a bit more complicated as the browsers do not implement the API the same way. First, in the JavaScript to be sure that also the Internet Explorer can access the event in the ondrop function, it has to be set from the window.event. Later, again for the Internet Explorer, event.cancelbubble needs to be set true. Finally, a false need to be returned for the Firefox browser to work properly. Additionally, by the specification the ondragover function needs to be canceled by making it to return false. For the Internet Explorer, the same thing has to be done for the ondragenter function. The specification also suggests that the allowed effects should be set for the datatransfer object, drop zone should define a dropzone attribute, and a couple of other requirements, but these seem not to be necessary in practice.

4 Listing 1: JavaScript code of the example application. To further test the applicability of drag and drop with other novel Web techniques, a small prototype application was implemented combining it with Scalable Vector Graphics (SVG) (Figure 2). The idea was to sketch an application where user could move around graphical SVG objects on a screen using drag and drop. Different implementations were tested on two browsers, Firefox and Chrome. As a result, it seemed to be impossible to make SVG elements directly draggable. However, the desired functioning was achieved by placing the SVG objects inside div elements, which were successfully made draggable. The ondragend handler function then modified the location of the div elements through the style attribute.

5 Figure 2: A Web application combining the HTML5 drag and drop with SVG. Implementations Before HTML5 introduced the drag and drop, Sire et al. implemented similar functionality in their project. To allow messaging for inter-widget communication they implemented two APIs, an inter-widgets messaging API, and a drag and drop messaging API [5]. They presented various different interaction schemes between different kinds of widgets in a widget composer. Similarly, HTML5 techniques are suggested to be applied to Personal Learning Environments (PLEs) for supporting drag and drop functionality between widgets in mashup implementations [6]. Some implementations of the HTML5 drag and drop have already been created. Most visible examples probably include services provided by Google. In Gmail it is possible to both directly insert (Figure 3) attachments from and download them to the file folders of the computer. In Google Docs it is also possible to upload new documents by dragging them from the folders (Figure 4), and, for example, to insert images to an editable document the same way (Figure 5). The latter technique was actually used for adding the images to this report.

6 Figure 3: Gmail by Google allows user to upload new document by dragging them from the file folder in a computer and dropping them to a drop zone. Figure 4: Google Docs allows user to upload new documents to the service by dragging and dropping them directly to the document list.

7 Figure 5: When editing a document in Google Docs, inserting an image can be done by dragging it to a drop zone. Web developers should be aware of possible vulnerabilities on their pages when implementing drag and drop functionalities, especially if their applications are using frames. It has been shown that drag and drop makes new type of attacks possible against the web sites [7]. Support As seen in the Figure 6, the browser support for the HTML5 drag and drop is already quite good. In common desktop browsers, only Opera is not yet supporting, nor is it known when the support will be added. Unfortunately, none of the mobile browsers is supporting it yet. This is probably because of the difference between the mouse and touch interactions. Figure 6: Browser support for Drag and drop in HTML5.

8 Conclusions While the drag and drop API is not as simple as it could be, it is very promising that almost all the main browsers are already supporting it. This enables web programmers to start implementing more features exploiting this feature. Google has already successfully implemented drag and drop features in some of its services. While these implementations concentrate on transferring files, other type of interactions are not yet popular. Differences between the implementations of the API in different browsers make the development of applications more difficult. Developers should carefully test the program in all the browsers to be sure that it functions properly. Additional code line needed by one browser can also make it not to work in another browser. It would be useful to develop an additional library on top of the current API to get rid of the browser dependencies. This is what the developers that frequently work with drag and drop functions will probably do. As drag and drop deals with transferring data from one place to another, the feature can cause privacy and security issues. While developers should consider these issues when developing their applications, the chances are that the security holes are only discovered when first exploited. References [1] Drag and Drop specification, Editor's Draft 1, 2012, W3C, [2] Wright, A., Ready for a Web OS?, Communications of the ACM, ACM, [3] Lawson, B. and Sharp, R., Introducing HTML 5, New Riders Pub, [4] Ian Hickson, Hixie's Natural Log, [5] Sire, S. and Paquier, M. and Vagner, A. and Bogaerts, J., A messaging API for inter-widgets communication, Proceedings of the 18th international conference on World wide web, ACM, [6] Taraghi, B. and Ebner, M. and Schaffert, S., Personal learning environments for higher education: A mashup based widget concept, Proceedings of the Second International Workshop on Mashup Personal Learning Environments, [7] Stone, P., Next generation clickjacking, White paper, BlackHat Europe, 2010.