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.
1. Drag and drop process 1.1 Drag eventWhen dragging the draggable element while holding down the mouse, it will be triggered in the following order:
dragstart -> drag -> dragend
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
1.3 Complete event flowFrom 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
2. Solve the problem that Firefox does not support drag and dropIf 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> 3. Solve the problem that the release mark is not displayed when dragging elements into the container in Chrome and OperaThe 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> 4. Solve the problem of firefox opening a new tab when placing itIf 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.
5. Write a complete small exampleSource 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.