Detailed explanation of Html5 native drag and drop operation

The drag and drop function of H5 was used in a recent project development. Since the existing project uses VUE family bucket, the vuedragable plug-in is used, but the whole process is quite painful. So I decided to start studying the principles of H5 drag and drop, and then apply it to the data-driven framework. To implement drag and drop operations in H5, at least two steps are required: 1) Set the draggable attribute of the object element you want to drag and drop to true (img and a elements allow drag and drop by default); 2) Writing and dragging Relevant event handling code. For the convenience of testing, I first use the jQuery library to complete the basic drag and drop function.

When dragging the draggable element while holding down the mouse, it will be triggered in the following order:

dragstart -> drag -> dragend

1. dragstart: Triggered when the mouse is pressed and started to drag (triggered once)
2. drag: Triggered while holding down the mouse and dragging (continuously triggered)
3. dragend: Triggered after releasing the mouse (whether the element is placed on a valid placement target or an invalid placement target)

When the draggable element is dragged into the container, it will be triggered in the following order:

dragenter -> dragover -> drop

dragenter: As long as an element is dragged to the drop target, the dragenter event will be triggered.

dragover: dragenter is followed by the dragover event, and this event will continue to be triggered while the dragged element is still moving within the range of the drop target.

dragleave: When the element is dragged out of the placement target, dragleave will be triggered.

drop: Fired when the dragged element is placed on the target element

From starting to drag the element to placing the element into the target area, it will be triggered in the following order:

dragstart->drag->dragenter->dragover->dragleave->drop->dragend

If we directly add the draggable attribute to an element, it can be dragged directly in Chrome and Opera (there is no release operation (such as the arrow changing to a + sign)), but there is no response in Firefox.

 <ul class=canDrog> <li draggable=true id=1>Excellent</li> <li draggable=true id=2>Good</li> <li draggable=true id=3>Medium</li> <li draggable=true id=4>Poor</li> </ul> <script> //No JS code</script>

To solve this problem, you must bind the dragstart event handler to the drag element and call the event.dataTransfer.setData function in this function.

 <script> <ul class=canDrog> <li draggable=true id=1>Excellent</li> <li draggable=true id=2>Good</li> <li draggable=true id=3>Medium</li > <li draggable=true id=4>Difference</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox Must access the dataTransfer object used for drag and drop communication event.dataTransfer.setData(Text,'1'); });</script>

The releasable logo may be different depending on the operating system. In Mac Chrome, it appears as a circular logo with a white '+' embedded in it.

The solution is to bind the dragover event to the container

 <ul class=canDrog> <li draggable=true id=1>Excellent</li> <li draggable=true id=2>Good</li> <li draggable=true id=3>Medium</li> <li draggable=true id=4>Difference</li> </ul> <table class=dataTbl> <thead> <tr> <th style=width: 10%>Section/week</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> </tr> </thead> <tbody> <tr> <td>Section 1</td> <td draggable=true ></td> <td draggable=true ></td> <td draggable=true ></td> <td draggable= true ></td> <td draggable=true ></td> </tr> <!--Omitted here--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function (event){ //firefox must access the dataTransfer object used for drag and drop communication event.dataTransfer.setData(Text,'1'); }); //google Chrome and opera need to add $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script>

If you release the dragged element when using Firefox, the default browser will open a new tab, as follows

This is because the browser executes the default behavior after the drop callback function. The usual solution is to add code that prevents the execution of the default event and prevents bubbling in the drop hook of the drag container.

 <script> //Release the element into the current element $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault (); event.stopPropagation(); });</script>

However, if draggable elements are dragged to other places, the problem of opening new tabs will still occur. In this case, the above code can be added to all containers.

Source code: https://github.com/pluslicy/drag

Later, we will study the vuedraggable plug-in library and apply it in the vue framework.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.