HTML5 and CSS3 authoritative guide. Pdf4

Drag-and-drop API

HTML5 implements a direct drag-and-drop API that simplifies HTML4 operations with events such as MouseDown, MouseMove, and more

Steps to implement drag and drop

1 To set the Draggable property of the dragged element to the true,img element and the A element (must specify HREF) by default allow drag and drop

2 writing event-handling code for drag-and-drop

Properties and methods of DataTransfer objects

Set the visual effect when dragging and dropping

The DropEffect property (the target element) is combined with the effectallowed attribute (the source element) to set the visual effect when dragging and dropping.

1 drag-and-drop elements are not allowed if the Effectallowed property is set to None

2 If the DropEffect property is set to None, drag-and-drop to the target element is not allowed

3 If the Effectallowed property is set to all or not set, the DropEffect element is allowed to be set to any value

4 If the Effectallowed property is set to a specific effect (not none, all), the DropEffect property must be set to an effect that is exactly equal, otherwise drag-and-drop is not allowed

The custom drag-and-drop icon refers to the small icon that is located below the mouse pointer during the drag element, and the Setdragimage method mentioned above requires 3 parameters: An icon element, a drag-and-drop icon offset from the x-axis of the mouse pointer, and an offset from the y-axis

The 5th chapter draws the graph

Slightly

The 6th Chapter Multimedia broadcast

Slightly

7th Chapter Local Storage

Web Storage: Compared to cookies, it has the advantages of large storage capacity and simplicity.

Web storage are divided into two types:

Sessionstorage, understood as temporary data, failed after closing the browser

Localstorage, save in Local

The same key name is not allowed to be repeated on save, and the key value can be modified after saving, but the key name is not allowed to be modified

Sessionstorage

Save Data Sessionstorage.setitem (Key,value);

Read data variable =sessionstorage.getitem (key);

Localstorage

Save Data Localstorage.setitem (Key,value);

Read data variable =localstorage.getitem (key);

Local Database

There is a "sqllite" file-type SQL database in HTML5 that is stored locally

There are two steps 1) Create an object that accesses the database 2) using transaction processing

var db=opendatabase (' MyDB ', ' 1.0 ', ' Test db ', 2*1024*1024);

Requires 4 parameters, followed by the database name, version number, description, and size, which returns the created database Access object, and if the database does not exist, the database is created

Chapter 8th offline applications

The local cache of the Web application is managed by the manifest file for each page, which is a simple text file that lists the file names of the resource files that need to be cached or not to be cached, and the access paths to those resource files

Manifest files can be specified for each page/entire Web application, example

In the MANIFEST file, the first line must be the "CACHE MANIFEST" text, telling the browser the role of this file, that is, the local cache of resource files to be specific settings, while the server configuration (let the server support Text/cache-manifest)

In Microsoft's IIS server steps: 1) Right-click the default Web site or need to add a type of Web site, pop-up Properties dialog box 2) Select "HTTP Header" tab 3) under MIME mapping, click the file Type button 4) in the Open MIME Type dialog box by clicking New Button 5) in the associated Extension text box, enter " Manifest ", enter" Text/cache-manifest "in the Content Type text box and click OK

In manifest, comments begin with # and the version number is best

Next specify the resource file, either a relative path or an absolute path, one row per resource

When you specify a resource file, you can divide the resource file into three categories: CACHE NETWORK FALLBACK

In the cache category, specify the resource file that needs to be cached locally, and if a page has a manifest file, the browser will automatically cache it (if not specified, the default is cache until other types are found)

The network category explicitly specifies that no local cache is allowed, and these resources are accessible only when the client connects to the server, in this case *

The fallback category specifies two resource files per row, the first resource file is the one that is available for online access, and the second resource file is an alternate resource file that is not available for online access

...

To change the manifest file directly when modifying the local cache, the browser automatically detects the manifest file and updates it automatically.

Browser-to-server interaction process

Example:

A Http://Lulingniu web site to index.html as the home page that uses the Index.manifest file, which requests a local cache index.html hello.js hello1.jpg Hello2.jpg These resource files

When visiting Lulingniu website for the first time: 1) Browser request Access Http://Lulingniu 2) server return index.html 3) Browser parsing page, request all resource files, CSS file js file image file etc 4) server return all resources 5) The browser processes the manifest file, requests the manifest file all required cached files 6) The server returns the file 7) the browser updates the cache, triggering an event

Open Http://Lulingniu again: 1) Browser request 2) Browser Discovery page is cached locally, using cache Page 3) to resolve resources in the cache 4) The browser requests the server manifest file 5) The server returns 304 code to notify the browser that it has not changed

If the manifest file changes, the browser re-requests the requested resource in the manifest file before triggering an event

Applicationcache Object

This object represents the local cache, and when the browser updates the local cache, the Updateready event of the Applicationcache object is triggered, notifying the local cache that the resource file has been downloaded

Applicationcache.onupdateready=function () {...}

It also has a method: Applicationcache.update check whether the manifest file is updated, and then immediately request the manifest file before downloading the resources, you can manually invoke

SetInterval (function () {applicationcache.update ();},5000);

Swapcache method

It is used to manually perform cached updates only after the Updateready event has occurred, and Applicationcache's Updateready event indicates that the content to be updated has been downloaded

Applicationcache.onupdateready=function () {

Alert ("Updating local cache ...")

Applicationcache.swapcache ();

Alert ("The local cache has been updated, please refresh the page");

};

If you do not call the Swapcache method, the downloaded resources will not be updated immediately, the next time you open this page will not be updated, and the Swapcache method updates the local cache, does not mean that the page pictures and scripts are also updated immediately, or to reopen the page

Events for Applicationcache objects

In addition to the Update method and the Swapcache method, there are a number of events

The first request page process (above example), found that the page has the manifest property, trigger the checking event, check whether the manifest file exists, there is no trigger Error event, indicates not found, does not perform after processing manifest file process , the server returns all files that require local cache, the browser triggers the downloading event, starts downloading these resources, periodically triggers the progress event, and the developer can get the progress programmatically; The download end triggers the cache event, which indicates that the first caching was successful

The re-request process, the manifest file is updated, not updated to trigger the Noupdate event, do not perform subsequent download operations, if updated, the download completed is not triggered by the cache event, but trigger the Updateready event

Return HTTP404 error when accessing cache list (page not found) or 410 error (permanent disappearance) triggering obsolete event

During the entire process, any local cache-related errors occur, triggering the error event