New features on H5 drag and drop API on | August more challenges

There are many new features in HTML5, drag-and-drop is one of the more useful features that can be applied to many business scenarios, and there are many interesting examples that can be implemented with this new feature.

Let’s start with a small drag-and-drop Demo:

concept

Drag and drop is a new feature in H5, which is to grab an object and drag it to another location, but only if the element is set to draggable=true.

Drag and drop has three procedures, namely: Start drag -> Drag -> Place elements

• Start dragging: The process of triggering a dragged element, such as when an element is tapped;
• Dragging: To move a dragged element;
• Placing elements: The process of placing a dragged element into another element.

There are apis for each phase, and we’ll take a look at these apis.

The event

H5 drag-and-drop has the following 6 apis:

• ondragstart
• ondrag
• ondragend
• ondragenter
• ondragover
• ondrop

So you can see that I’ve written these apis in two ways, the first three are apis for dragging elements, and the last three are apis for putting elements.

For example: I’m dragging div#box1 to div#box2, so div#box1 should listen for dragstart and dragend, and div#box2 for the other three.

Note:dropThe event may not fire on some browsers and is required indragoveranddropEvent inside block browser default events:

addEventListener('dragover'.e= > {
    e.preventDfault()
})
addEventListener('drop'.e= > {
    e.preventDfault()
})
Copy the code

In addition, drag in and out is determined by the position of the mouse, not the position of the dragged element.

Order of events:

• When dragging (not entering the place element area) :

ondragstart -> ondrag -> ondragend

• Drag (into place element area) :

ondragstart -> ondragenter -> ondragover -> ondrag -> ondrop -> ondragend

The data transfer

The process of dragging and dropping elements often requires dataTransfer. For example, the state of the dragged elements should be obtained when the elements are placed, and data can be transferred through the dataTransfer object.

Do more by setting the state during the dragStart start phase and then retrieving the state during drop.

addEventListener('dragstart'.e= > {
    e.dataTransfer.setData('msg'.'hello')
    // Pass objects
    // e.dataTransfer.setData('greet', JSON.stringify({ msg1: 'hello', msg2: 'good morning' }))
})
addEventListener('drop'.e= > {
    const msg = e.dataTransfer.getData('msg')
    // TODO
    e.preventDfault()
})
Copy the code

Note that setData can only be set to strings. If it is an object, serialize it via json.stringify.

compatibility

There are still some compatibility issues, see Caniuse for details.

conclusion

If you feel that writing native drag trouble, here also recommend again encapsulated sortable.js library, powerful, not difficult to use;

Drag this feature is widely used, but because it is a new feature of H5, compatibility in some browsers still has some problems, so it is used according to the project situation.

The basic usage is also covered here, and you can refer to the MDN documentation for details.