In HTML5Page DevelopmentIna very important point in the drag-and-drop operation is that we want to determine where the drag-and-drop event occurred. As the name implies, drag and drop events, that is, the removal (Drag) events and release (Drop) event.
a very important point in the drag-and-drop operation is that we want to determine where the drag-and-drop event occurred. As the name implies, drag and drop events, that is, the removal (Drag) events and release (Drop) event.
When an element is dragged, the following event is triggered sequentially on this element:
1. DragStart
2. Drag
3. Dragend
when you press the mouse button and start moving the mouse, it fires on the dragged elementDragStartevent, Random triggerDragevents,Dragevents are triggered as the mouse moves, and when the drag stops, either placing the element on a valid target or an invalid target will triggerDragendevent.
Tip: Most browsers create a translucent copy of the element being dragged while the element is being dragged, and the copy always moves with the cursor.
When an element is dragged onto a valid drop target, the following events occur in turn:
1. DragEnter
2. DragOver
3. DragLeaveorDrop
whenever an element is dragged onto a drop target, it firesDragEnterevent, which is then triggeredDragOverevent that is constantly triggered when the dragged element moves on the target elementDragOverevent is triggered if the element is moved out of the target elementDragLeaveevent, which is triggered if the element is placed in the target elementDropevent.
Custom Drop targets
Some elements are not allowed to be placed by default, what happens when the element we drag is placed on an invalid drop target? In fact, nothing will happen, that is, no matter how the user operates, it will not happenDropevent.
but we can set it to be able to be placed. RewriteDragEnterand theDragOverThe default behavior of the event is to set the target to be placed.
Let DropTarget = document.getElementById (' target ')
Droptraget.addeventlistener (' DragEnter ', E = {
E.preventdefault ()
}, False)
Droptraget.addeventlistener (' DragOver ', E = {
E.preventdefault ()
}, False)
DataTransferObject
Now we've set the target to be able to be placed, but when we drop the element on the target, nothing happens, and that's it.
, because putting elements on a target that can be placed only triggers theDropEvents
That nothing has happened.
So, we need to realize the interaction of the data. This time, we need to useDataTransferthis object. DataTransferis a property in the event object for some column drag-and-drop events (E.datatransfer).
Communication
DataTransferThere are two main methods,GetDataand theSetData.
What is the effect of these two methods? Give me a chestnut: you canAsets the data when the element is dragged
E.datatransfer.setdata (' text ', ' i\ ' m A!!! ')
and then in the targetBof theDropThis data can be obtained in the event
E.datatransfer.getdata (' text ')//I ' m A!!!
This allows for the communication between the dragged element and the target element.
The two methods used to pay attention to a lot of problems, specifically, please seeDocument
DropEffectand theeffectallowed
UseDataTransferof theDropEffectand theeffectallowedthese two properties control what the dragged element does, and what action the drop target element receives.
among them,DropEffectproperty to know what placement behavior the dragged element can perform, whether the element is copied to the target element or moved directly to the element .... This property can be set to the following4a value:
·None: The dragged element cannot be placed on the target
·Move: The dragged element should be moved to the target
·Copy: The dragged element should be copied to the target
·Link: The drop target opens the dragged element (the dragged element must be a link that hasURL)
DropEffectmust be inDragEntersetting in Events
Effectallowedis andDropEffectThe type of element that is allowed to be dragged .DropEffect
·uninitialized: No placement behavior is set for the dragged element
·None: Dragged element cannot have any behavior
·Copy: Only allowed values areCopyof theDropEffect
·Move: Only allowed values areMoveof theDropEffect
·Copylink: Only allowed values areCopy/linkof theDropEffect
·Copymove: Only allowed values areCopy/moveof theDropEffect
·Linkmove: Only allowed values areLink/moveof theDropEffect
· All: Allows arbitraryDropEffect
Effectallowedmust be inDragStartsetting in Events
naïve I used to think that putDropEffectset toMove, puteffectallowedset toMove. When I drag an element, the browser will do it for me .DOM, changing the position of the dragged element. And in fact, nothing is going to happen, it's very confusing at first.~~~
after my test,DropEffectand theeffectallowedIf the pairing succeeds, thenDropThe event will be triggered, otherwise, it will not.
Source: Mertens Notes
HTML5 Learning Drag-and-drop operation detailed
