html5-let the drag and drop become popular.

Before HTML5, the drag-and-drop of page elements requires listening to a series of events such as MouseDown, MouseOver, and MouseUp, and then changing the relative position of the elements to achieve this effect. The advent of the HTML DnD (drag-and-drop) API makes drag and drop simple. However, since DnD is still in the draft stage, browsers do not unify their specifications, and some events may have different effects in different browsers.

To use DnD, you need to be clear about two things, one is the element you want to drag, and the other is where you can place the dragged element. Drag and drop is nothing more than dragging an element from one location to another.

Drag

First we need to specify the element to drag, which is easy to set, set the Draggable property to the DOM element, and set the property value to True. such as this:

In fact, the above code is superfluous, the picture (IMG) on the page, the link (a tag with href), and the text by default are draggable. For unification, it is best to add the Draggable attribute as well. The Draggable property also has two values, false and auto, as the name implies, False is set to non-draggable, and auto is the browser default.

When we left-click (Press) the draggable DOM element and move it lightly, the ondragstart event is triggered, and the event is only triggered once. Usually we record the element information that is being dragged in the ondragstart event (it is good to handle it when ondrop). For example, the ID of the element being dragged is recorded in the demo:

for (var i = lis.length; i--;) {
Lis[i].ondragstart = function (e) {
E.datatransfer.setdata (' id ', e.target.id);
};
}

After the ondragstart event is triggered, the Ondrag event is triggered until the drag-and-drop event ends.

Drop

Next we need to clarify where the dragged element can be placed, and the OnDragOver event specifies where to place the dragged data.
By default, elements cannot be placed in other elements, and if you need to set allow placement, we must block the default handling of elements:

var dus = Document.queryselector ('. Dustbin ');

Dus.ondragover = function (e) {
E.preventdefault ();
};

When an element is dragged onto an element, the latter's OnDrop event is triggered, and the default behavior of some DnD events needs to be canceled if the OnDrop event needs to be triggered correctly:

Dus.ondrop = function (e) {
Call Preventdefault () to avoid browser default handling of data (the default behavior of the drop event is to open as a link)
E.preventdefault ();
E.stoppropagation (); Compatible with FF

var id = e.datatransfer.getdata (' id ')
, node = document.getElementById (ID);

Node.parentNode.removeChild (node);
};

Some documents say to cancel the default behavior of the OnDragEnter () event, landlord in the actual operation did not find this.

Event

The above mentioned three events in DnD, DragStart, DragOver, and drop, in fact, DND has a few events, their order of occurrence is:

DragStart (drag Element), DragEnter (drop Element)--drag (drag Element), DragOver (drop Element), drop (drop Element), Drop Element)-Dragend (drag Element)

It is not difficult to understand that the drag-and-drop event starts when the Ondragstart event is triggered and the OnDragEnter event is triggered when the dragged element enters the element that can be placed (OnDragEnter is not triggered when the two elements intersect. Instead, the drag element moves over the target element for a period of time before it is triggered, and then an event continues to trigger the OnDragOver event (refer to MouseOver), triggering ondragleave (and OnDragEnter) when the dragged element leaves the element that can be placed. event, which triggers the OnDrop event when the mouse is released and the dragged element is just on the element that can be placed, triggering the ondragend (and ondragstart corresponding) event at the end of the drag-and-drop event, which is triggered regardless of the success of the drag-and-drop operation.

DataTransfer

During the drag process, the callback function accepts an event argument that has a DataTransfer property. It points to an object that contains various information related to the drag.

There are two main methods of DataTransfer objects: GetData () and SetData (), and it is important to note that both methods are used only in the DragStart and drop events. It is not difficult to imagine that getData () can obtain a value saved by SetData ().
The first parameter of the SetData () method, which is also the only parameter of the GetData () method, is a string that represents the saved data type, with a value of ' text ' or ' URL '. IE only defines two valid data types: ' Text ' and ' URL ', and HTML5 expands it to allow for the various MIME types to be specified.

When you drag the text in the text box, the browser automatically calls the SetData () method, saves the dragged text in the ' text ' format in the DataTransfer object, and similarly, when you drag and drop the link or image, it automatically calls SetData () to save the URL information, if necessary, You can use GetData () to read the values saved by the browser in the drop event.

But this does not seem to be an egg, we are in the actual development of the majority of the DOM operation, so in most cases we call SetData () in the DragStart event handler, manually save the data we want to transfer, and then read in the drop event, a bit like jQuery dat A event.

DropEffect and effectallowed

DropEffect and Effectallowed are the two properties of the DataTransfer object mentioned earlier, what's the use? In short, there are two uses, one can set the element is dragged when the mouse style, the second is to set whether the element can be placed.

Here I tested three browsers with Chrome, FF and Uc,chrome and UC behaving similarly.

In general, we leave the element in its original position, and the mouse gesture becomes a "no hand" until the element is dragged onto the area where it can be placed.

But FF otherwise, in FF, the element does not show "no hands" during the drag process.

The default mouse gesture is as follows when the element is dragged onto a removable area.

In fact, by setting DropEffect and effectallowed a total of three mouse gestures (move, copy, and link) can be set as follows (move and default looks the same):

You need to set effectallowed in the Ondragstart method and set DropEffect in the OnDragOver method. Refer to the demo code for details.

We can also set the values of DropEffect and effectallowed so that a drop element can only be placed on a move element, or a copy element. Specifically, you can look at this article, HTML5 Magic Hall: A comprehensive understanding of drag & Drop API, very good. You can also refer to the Elevation 484 page for a value.

To be sure, DnD does not help you with any action of copy or move, but rather requires the user to record the object information that needs to be manipulated during the DND process, and then complete the actions of copy or move in the drop event.

Tricks

There are several problems that are found in the practice process.

Opening the Demo in FF and dragging the picture to Gouges will automatically open the picture in the new tab, although I have added Preventdefault () to the various events, it is unclear why.

If you can drag the element, initially in a can be placed inside the element, first drag the element out, and then put back, will trigger the OnDrop event, but E.target is dragged elements. If placed in another element, target points to the placed element instead of dragging the element. This can be resolved by judging the target element. This can be seen in the W3cschool demo, open the console, drag the picture out, and then drag back, the console will print errors, obviously the code does not take this into account.

Continue to read more related articles: http://wex5.com/cn/2016/01/

This article by WeX5 June, WeX5 an open source free HTML5 development tool, H5 app development with wex5!

html5-let the drag and drop become popular.