Operation method of Native drag and drop in Html5
This article mainly introduces the knowledge of the operation method of native drag in Html5. The content is detailed and easy to understand. The operation is simple and fast. It has certain reference value. I believe everyone will gain something after reading this article on the operation method of native drag in Html5. Let's take a look at it together.
1. drag process
1.1 drag event
When you hold down the mouse and drag the draggable element, it will trigger in the following order
dragstart -> drag -> dragend
dragstart: Triggers when mouse is held down to start dragging (Triggers once)
drag: triggered during mouse drag (continuous trigger)
drarend: Triggers when the mouse is released (whether the element is placed on a valid drop target or an invalid drop target)
1.2 Place Events
When dragging draggable elements into the container, they will trigger in the following order
dragenter -> dragover -> drop
draenter: Trigger draenter event whenever an element is dragged onto the drop target
dragover: draenter is followed by a dragover event that continues to fire as long as the dragged element moves within the drop target range.
dragleave: Dragleave is triggered when the element is dragged to the drop target
drop: Fires when the dragged element is dropped onto the target element
1.3 complete event stream
From the start of dragging the element to the placement of the element in the target area, it will trigger in the following order
dragstart->drag->dragenter->dragover->dragleave->drop->dragend
2. Fix Firefox does not support drag
If we add a draggable attribute directly to an element, it can be dragged directly in chrome, opera (there is no action to release (such as arrow change + sign)), but there is no response in firefox.
excellent Liang in difference //no JS code
To solve this problem, you must bind the dragstart event handler function to the dragged element and call the event.dataTransfer.setData function in that function
excellent Liang in difference $('.canDrog > li').bind('dragstart',function(event){ //firefox must access the dataTransfer object used for drag communication event.dataTransfer.setData("Text",'1'); });
3. Fixed chrome, opera dragging elements into containers without displaying releasable logos
The releasable logo may vary depending on the operating system, but in mac chrome it appears as a circular logo embedded with a white '+'.
The solution is to bind dragover events to containers
excellent Liang in difference Session/week Monday Tuesday Wednesday Thursday Friday section I $('.canDrog > li').bind('dragstart',function(event){ //firefox must access the dataTransfer object used for drag communication event.dataTransfer.setData("Text",'1'); }); //Google Chrome,Opera needs to be added $(".dataTbl").bind("dragover",'td',function(e){ e.originalEvent.preventDefault(); })
4. Fixed firefox opening new tabs when placed
When using firefox, if you release the dragged element, the default browser will open a new tab, as follows
This is because the browser performs default behavior after the drop callback function. The usual solution is to add code to the drop hook of the drag container to prevent default event execution and prevent bubbling.
//Release the element into the current element $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault(); event.stopPropagation(); });
However, dragging draggable elements elsewhere still causes the problem of opening new tabs, so add the above code to all containers.
5. Write a complete small example
About "Html5 native drag operation method" The content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of the knowledge of "native drag operation method in Html5." If you still want to learn more knowledge, please pay attention to the industry information channel.
