Drag and drop: from Dojo to HTML 5 (1)

Dojo and HTML 5 Introduction

Dojo is one of the most popular open source JavaScript tools libraries, and many developers and business users use dojo as their preferred JavaScript tool. Dojo provides a wide range of client components for Web application development, making it easy for you to make HTML DOM operations, drag and drop, AJAX calls, custom visual controls, and so on to make your Web application a rich Web application (RIA). And dojo is doing a great job in terms of performance, accessibility, multi-language support, and documentation, which is one of the reasons companies choose Dojo.

51CTO Recommended Topics: HTML 5 Next generation Web development standards

HTML 5, the newest generation of HTML, will become the new standard for HTML, XHTML, and HTML DOM, and HTML 5 is the result of the collaboration between the WHATWG and the consortium, and is still out of development; Since the last generation Html4,web world has changed dramatically, the advent of HTML 5 will promote the development of the WEB, HTML 5 provides a lot of new features, mainly:

New HTML elements, such as section, Nav, header, footer, article, etc.

The Canvas element for painting

Video and audio elements for multimedia playback

The geolocation API for positioning

Local Storage and offline applications

WEB workers

Drag and Drop API

File API

We mainly explain the drag-and-drop function of HTML 5 and interact with the desktop with the file API. To compare to the DND drag-and-drop component of Dojo.

Use Dojo to create and customize drag and drop applications

Similar to Dojo's other components, there are two ways to implement drag-and-drop implementations: declarative and programmatic. Here we use a declarative approach to do a brief introduction.

In the Dojo drag-and-drop implementation, there are two important elements dojo.dnd.Source and dojo.dnd.Target. These two elements are marked with the source container sources and target container targets in the drag-and-drop respectively. It is important to note that source container sources default to target container targets and do not need to be declared as target container targets. We create some elements that can be dragged in source container sources, and to make these elements drag, we add the class attribute value Dojodnditem to those elements. The following example code defines the source container sources and some elements that can be dragged. In the elements that can be dragged, we can define their drag type Dndtype. Dndtype value developers can define their own, and the target container's Accept attribute defines the drag type that the target container accepts.

Listing 1. Create drag-and-drop source containers and drag-and-drop elements

 
  
  

  
   
   
<div id= "source" style= "height:400px;" dojotype= "Dojo.dnd.Source" >
  
   
   
<div id= "item1" class= "Dojodnditem item" dndtype= "Divitem" >item1</div>
  
   
   
</img>
  
   
   
<a href= "http://www.w3.org/TR/html5/" class= "Dojodnditem item" dndtype= "Linkitem" >
  
   
   
HTML5 specification</a>
  
   
   
</div>
 
  
  

For Target we can create a div and then add the attribute dojotype= "Dojo.dnd.Target" and the attribute accept. Dojodnditem elements of types that are not in accept will not be accepted by this container. For example, the target container in Listing 2 accepts only the Divitem and Imageitem types, and the Linkitem in Listing 1 will not be dragged into this target container.

Listing 2. Create a drag-and-drop target container and an acceptable type

 
  
  

  
   
   
<div id= "target" style= "height:400px" dojotype= "Dojo.dnd.Target"
  
   
   
Accept= "Divitem, Imageitem" >
 
  
  

The drag-and-drop of real Web apps is not that simple, and developers often need to be more involved in the drag-and-drop process. This can be done by inheriting extensions to the Dojo.dnd.Source and Dojo.dnd.Target provided by Dojo to develop the functionality and features that meet the needs of the business. Here will not repeat.

Creating drag and drop applications with HTML 5

In this chapter, we're going to create a simple drag-and-drop application using HTML 5, as shown in Figure 1, where users can drag content from the left side of the page to the right side of the area. The code for this application can be downloaded in the attachment.

Figure 1. HTML 5 Drag Application Effect diagram

[1] [2] Next page