HTML5 Guide (3)-Implementing drag-and-drop function-H5 Tutorial-php.cn

HTML5 Guide (3)-Implementing drag-and-drop function

黄舟

Release： 2017-03-22 16:05:52

Original

1436 people have browsed it

The content of this article is about how to implement the html element drag and drop function in html5. Before html5, to implement drag and drop, you needed to use js. Now html5 supports the drag and drop function internally, but to implement slightly more complex functions, the help of js is still indispensable. Let's look at a few examples below.

　1. Create a drag-and-drop object

We can tell the browser which elements need to implement the drag-and-drop function through the draggable attribute. draggable has three values: true: the element can be dragged; false: the element cannot be dragged; auto: the browser determines whether the element can be dragged.

The system default value is auto, but in the auto case, browsers have different support for the drag and drop function of different elements. For example, the img object is supported but the p object is not supported. Therefore, if you need to drag an element, it is best to set draggale to true. Let’s look at an example below:

Example

car1 car2 car3

drop here

Copy after login

Running effect:

　2. Processing drag events

Now let’s understand the events related to drag and drop. There are two types of events, one is the event of the drag object, and the other is the event of the drop area. Drag events include: dragstart: triggered when the element dragging starts; drag: triggered during the element dragging process; dragend: triggered when the element dragging ends. Let’s take a look at an example:

Example

car1 car2 car3

drop here

Copy after login

Running effect:

　3. Create a delivery area

We Let’s look at the events related to the drop area: dragenter: triggered when the drag object enters the drop area; dragover: triggered when the drag object moves within the drop area; dragleave: triggered when the drag object is not placed in the drop area and leaves the drop area. ;drop: Triggered when the dragged object is dropped in the drop area.

Let’s take a look at an example:

Example

car1 car2 car3

drop here

Copy after login

Running results:

4 .Use DataTransfer

We use DataTransfer to transfer data from the drag object to the drop area. DataTransfer has the following properties and methods: types: returns the format of the data; getData(): returns the data in the specified format; setData(, ): sets the data in the specified format; clearData(< format>): removes the specified format data; files: returns an array of files that have been delivered.

Let’s take a look at the following example, which achieves the same effect as Example 3:

Example

car1 car2 car3

drop here

Copy after login

5. Drag and drop files

HTML5 supports file api , allows us to operate local files. Generally, we do not use the file api directly. We can use it in combination with other features, such as drag and drop effects, as in the following example:

Example

Drop Files Here

Copy after login

DataTransfer returns a FileList object. We can treat it as a file array object. file contains the following attributes. :name: file name; type: file type (MIME type); size: file size.

Running effect:

6. Upload files

The following introduces an example of uploading files by dragging ajax.


    Example
    

    
    
        

            

                Bananas:
            
                
        
        
            

                Apples:
            
                
        
        
            

                Cherries:
            
                
        
        
            

                File:
            
                
        
        
            

                Total:
            
                0 items
        
    
    
        

            Drop Files Here

Copy after login

Effect:

## Some of the above examples may have different running effects in different browsers. I use the Chrome browser, except for Examples 5 and 6. Except for supporting multiple files, other examples run normally. You can download the demo.

The above is the detailed content of HTML5 Guide (3)-Implementing drag-and-drop function. For more information, please follow other related articles on the PHP Chinese website!