Recommended content related to native drag and drop

Dragable attribute We have introduced several relevant knowledge about native drag and drop in HTML5 before. Today I will introduce to you some other small things in HTML5 drag and drop. Without further ado, let’s take a look together. By default, links, text, and images are draggable, so you don’t need to write code to drag them. If you want other element tags to be draggable, then only HTML5 can do it. HTML5 specifies the dragable attribute for all HTML elements, indicating whether the element can be dragged. The dragable attribute is automatically set to true in link and image tags, and the default value of the dragable attribute of other elements is false. Browsers that support the dragable attribute are: Firefox 4+, Chrome, IE 10+ and Safari 5+. Opera 11.5 and earlier versions do not support the HTML5 drag-and-drop function. In addition, to enable Firefox to support draggable attributes, you must add an ondragstart event handler and save some data in the dataTransfer object.

1. HTML5 actual combat and analysis of native drag (four draggable Dragable attributes and other members)

#Introduction: We have introduced several articles about HTML5 to you before Knowledge about native drag and drop in China. Today I will introduce to you some other small things in Html5 drag and drop. Without further ado, let’s take a look together.

2. HTML5 actual combat and analysis of native drag and drop (three dataTransfer objects)

Introduction: Although native drag is implemented through dragstart, drag and dragend events. But this is just drag and drop. There are still some drag and drop problems in IE6 and IE7, and data exchange is not implemented. In order to realize the exchange of data, IE5 introduced the dataTransfer object. The dataTransfer object is a property of the event object, used to transfer data in string format from the dragged element to the drop target. Because it is a property of the event object, the dataTransfer object can only be accessed within the event handler of the drag-and-drop event. In the event handler, you can use the properties and methods of this object to complete the drag-and-drop functionality.

3. HTML5 actual combat and analysis of native drag (two drag events dragstart, drag and dragend)

Introduction: Through drag and drop events, we can control drag and drop many things. Which element or where the drag event occurs is the most critical. Some events are fired on the dragged element, and some events are fired on the drop target. When an element is dragged, the events triggered are: dragstart event, drag event and dragend event.

4. HTML5 actual combat and analysis of native drag and drop (overview of drag and drop history)

Introduction: When I mention drag and drop, I think of a very interesting effect during JavaScript training, that is drag and drop. You can use the mouse to drag an object anywhere you want.

The above is the detailed content of Recommended content related to native drag and drop. For more information, please follow other related articles on the PHP Chinese website!