Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "what is the grammar of H5 drag-and-drop technology", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article, let's take a look at this "H5 drag-and-drop technology what grammar" article.

When it comes to drag and drop, we are all familiar with it. What about drag and drop? The meaning of the word difference is different. Drag and drop means drag and drop. Drag and drop means drag and drop. We all know the disadvantages of native JS drag and drop effect:

1. Code is relatively complex and redundant

two。 Limited to drag and drop between elements within the browser

3. Drag and drop across pages cannot be realized.

So H5 has the advantages of drag-and-drop technology over JS native HTML5 drag-and-drop:

H5 drag and drop technology, drag&drop, support for browsers:

Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop. Note: drag and drop is not supported in Safari 5.1.2.

So what api syntax does it have? let's take a look at:

1. Draggable attribute

Use draggable to tell browsers which elements need to be dragged. There are three optional values:

True: elements can be dragged

False: elements cannot be dragged

Auto: the browser determines whether the element can be dragged (default)

2. Object drag and drop event

Dragstart: triggered when you press the mouse button and start to move

Drag: continuously triggers during element drag-similar to mousemove

Dragend: triggered when the element drag stops

3. Event flow in the release area

When an element is dragged to a valid placement target, the following events occur in turn:

1)。 Dragenter: triggered when an object is dragged into the release area

2)。 Dragover: continuously triggers when dragging objects move within the drop area

3)。 Dragleave: triggered when an element is dragged out of the drop area

4)。 Drop: triggered when a dragged object is dropped in the drop area

Although all elements support placing target events, they are not allowed by default and need to override the default behavior of events, such as:

PreventDefault () must be executed in ondragover or the ondrop event will not be triggered

4. DataTransfer object-commonly used method

SetDragImage (icon, icon distance pointer X axis offset value, Y axis offset value)

Specify an icon to display below the cursor when dragging occurs

5. DataTransfer object-commonly used attributes:

DropEffect indicates what kind of placement behavior the dragged element can perform

Possible values:

"none": you cannot put dragged elements here

"move": move the dragged element to the drop target

"copy": copy the dragged element to the drop target

"link": placing the target opens the dragged element (with URL)

What kind of dropEffect is effectAllowed allowed to drag an element

Allowable value:

"copyLink": dropEffect with allowed values of copy and link

"copyMove": dropEffect with allowed values of copy and move

"linkMove": dropEffect with allowed values of link and move

"all": allow arbitrary dropEffect

Note: using the dropEffect property with the effectAllowed property to set the effectAllowed property in the dragstart event handler setting each possible value of the dropEffect property dropEffect in the dragover event handler will cause the cursor to appear as a different symbol

6. Files file

DataTransfer.files: if you are dragging and dropping files, return the list of files being dragged and dropped FileList

FileReader: specifically for reading files, the FileReader interface provides some methods to read files and an event model that contains read results

FileReader.readAsDataURL method: the parameter is the file object to be read, and the file is read as DataUrl

FileReader. Event: this event is triggered when the reading of the file is completed successfully. After the event is triggered, you can get the read file data through this.result. If it is a picture, it will return the image data in format.

The above is about the content of this article on "what is the grammar of H5 drag-and-drop technology". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.