Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.