HTML5 native drag-and-drop instance analysis and html5 instance analysis

HTML5 native drag-and-drop instance analysis and html5 instance analysis

HTML5 provides the native drag-and-drop JavaScript API, which is easy to use.

Compatibility:

 

For PC-side browsers, Firefox, Chrome, and Safari have good support, but some features of IE and Edge browsers are not supported, such as IE10, IE11, and Edge for dataTransfer. setData (format, data) only defines two valid data types: "text" and "URL. HTML5 standards allow various MIME types.

Here for more information: http://caniuse.com/#search=drag

 

This article implements the HTML5 native drag-and-drop application Demo, using common methods and attributes, compatible with modern browsers, or look at the effect first:

 

The following describes in detail --

Native drag and drop event:

Events applied to the dragged element:

• Dragstart

When you press the mouse and start to move the mouse, the dragstart event is triggered on the drag-and-drop element.

Note: To use the native drag-and-drop function of HTML5 to make the element traceable, you need to set the draggable attribute. By default, images, links, and selected text can be dragged because their draggable attributes are automatically set to true.

　　　　

• Drag

After the dragstart event is triggered, the drag event is triggered immediately, and the event is continuously triggered during the drag of the element.

• Dragend

The dragend event is triggered when the drag is stopped (with the mouse open.

 

Events applied to placement targets:

• Dragenter

If an element is dragged to the placement target, the dragenter event is triggered.

• Dragover

After the dragenter event is triggered, the dragover event will be triggered immediately and will be triggered continuously as long as the dragged element moves within the range of the target.

• Dragleave

If an element is dragged out of the position target, the dragover event does not occur, but the dragleave event is triggered.

• Drop

If an element is placed in a placement target, the drop event is triggered instead of the dragleave event.

 

　　Note: (1)The dragged element and placement target can be set to the same element, and the drop event can also be triggered on its own, although it seems useless =. =

　　　　　(2)The reference standard for the drag element to enter the placement target range and exit is the location of the mouse, rather than the border of the image dragged under the mouse

(3)The image displayed below the mouse cursor when dragging. By default, it is a copy of the element. In the dragstart event, you can copy the element (you can also use setDragImage () customize the elements dragged by the mouse), so to hide the original elements, it is best to process in the drag event, that is, after copying (see the source code at the end of the article)

 

DataTransfer object

A dataTransfer object is an attribute of an event object and can only be accessed in the drag-and-drop event handler. In addition, some methods and attributes of the dataTransfer object can only be set in specific drag-and-drop events.

　　Common Methods:

• SetData (format, data)

In the dragstart event, call the setData () function for the drag-and-drop element to set the data to be passed. It is used to transmit string-format data from the drag-and-drop element to the placement target.

The first parameter is the data type, where IE only defines two valid data types: "text" and "URL", and the second parameter is a string, indicating the data to be transmitted.

 

• GetData (format)

In the drop event, call the getData () function for the target to obtain the passed data.

The first parameter is the data type set in setData ().

 

• SetDragImage (element, x, y)
  

Specify an image. When the image is dragged, it is displayed below the cursor. Take three parameters: the HTML element to be displayed and the x and y coordinates of the cursor in the image. The HTML element can be an image or another element.

This attribute is not supported by IE10, IE11, and Edge browsers.

 

• ClearData (format)

Clear the data saved in a specific format.

 

　　Common attributes:

• DropEffect

In the dragenter event handler, set the dropEffect attribute value for the placement target to determine which placement behavior the dragged element can perform (when the dragged element is dragged to the placement target, different cursor symbols are displayed)

None: do not place the dragged element here. This is the default value for all elements except the text box.

Move: move the dragged element to the placement target.

Copy: copy the dragged element to the placement target.

Link: place the target to open the drag element (but the drag element must be a link with a URL ).

　　

• EffectAllowed

In the dragstart event handler, set the value of the inclutallowed attribute for the drag-and-drop element to indicate which dropEffect of the drag-and-drop element can be used with the dropEffect attribute above.

Uninitialized: no placement behavior is set for the dragged element.

None: The dragged element does not have any behavior.

Copy: Only dropEffect with the value of "copy" is allowed.

Link: Only dropEffect with the value "link" is allowed.

Move: Only dropEffect with the value "move" is allowed.

CopyLink: dropEffect with the allowed values "copy" and "link.

CopyMove: dropEffect with the allowed values "copy" and "move.

LinkMove: dropEffect with values "link" and "move.

All: allow any dropEffect.

 

For more information about some of dataTransfer's other methods and attributes, see the https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API here.

 

Source code at the end of this article --

HTML code:

<Div id = 'Container'> <div id = 'wrapp'> </div> <div id = 'cart'> </div>View Code

CSS code:

* {Margin: 0; padding: 0;} body {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;} # wrap {height: 100px; text-align: center;} img {width: 100px; height: 100px; cursor:-webkit-grab; cursor: -moz-grab; cursor: grab;} # cart {width: 500px; height: 100px; border-radius: 20px; margin: 50px auto 0; background-color: orange ;} # cart. hover {background-color: red;} # cart img {width: 70px; height: 70px; margin: 15px ;}View Code

JS Code:

// Three events of the dragged element: function dragstart (e) {e = EventUtil. getEvent (e); var target = EventUtil. getTarget (e); e. dataTransfer. setData ("text", target. title); // because IE10, IE11, and Edge do not support the setDragImage () method, you need to determine if (e. dataTransfer. setDragImage) {e. dataTransfer. setDragImage (target, 50, 50);} // use the effectAllowed event and dropEffect event together with e. dataTransfer. export tallowed = 'move '; dragElement = target;} function drag (e) {e = EventUtil. getEvent (E); var target = EventUtil. getTarget (e); setOpacity (target, 0);} function dragend (e) {e = EventUtil. getEvent (e); var target = EventUtil. getTarget (e); setOpacity (target, 1) ;}// four events where the target is placed: function dragenter (e) {e = EventUtil. getEvent (e); var target = EventUtil. getTarget (e); // important! Override the default behavior of the dragenter event so that it can trigger the drop event EventUtil. preventDefault (e); // use e. dataTransfer. dropEffect = 'move '; target. className = 'hover ';} function dragover (e) {e = EventUtil. getEvent (e); // important! Override the default behavior of the dragover event so that it can trigger the drop event EventUtil. preventDefault (e);} function dragleave (e) {e = EventUtil. getEvent (e); var target = EventUtil. getTarget (e); target. className = '';} function drop (e) {e = EventUtil. getEvent (e); var target = EventUtil. getTarget (e); var title = e. dataTransfer. getData ("text"); console. warn ('add % s to the shopping cart! ', Title); target. className = ''; dragElement. parentNode. removeChild (dragElement); var img = dragElement. cloneNode (); img. draggable = false; setOpacity (img, 1); cart. appendChild (img); // important! To enable Firefox to support normal drag and drop operations, cancel the default action EventUtil of the drop event. preventDefault (e);} // sets the transparency function setOpacity (element, value) {if (typeof element. style. opacity! = 'Undefined') {element. style. opacity = value;} else {element. style. filter = "alpha (opacity =" + value * 100 + ")" ;}}// event processing, compatible with var EventUtil ={// Add the event handler addHandler: function (element, type, handler) {if (element. addEventListener) {element. addEventListener (type, handler, false);} else if (element. attachEvent) {element. attachEvent ("on" + type, handler);} else {element ["on" + type] = handler ;}}, // get the event object getEvent: functi On (event) {return event? Event: window. event;}, // get the event Target getTarget: function (event) {return event.tar get | event. srcElement;}, // cancel the default event preventDefault: function (event) {if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}; var imgs = document. getElementsByTagName ("img"), cart = document. getElementById ('cart'), dragElement = null; for (var I = 0; I References: JavaScript advanced programming, MDN