Summary
As a new attribute draggable of h5, it can give all html elements the effect of dragging. And under this attribute, there are also various methods about dragging effects.
And this article mainly talks about the use of draggable attributes and working scenarios.
1. Understand the use of draggable attributes
For me, I hope that when learning a piece of knowledge, there will be an obvious effect at the beginning, so I will first write an example that can make people feel the effect of the draggable attribute:
For drag and drop, common scenarios must have two roles:
(1) The dragged element A
(2) The element A is dragged into
Now we create two elements in the body:
<body>
<div id="Adiv" class="A">
A---拖拽的元素
</div>
<div id="Bdiv" class="B">
B---A被拖进的元素
</div>
</body>
Now we keep two points in mind:
(1) The dragged element must be given the draggable attribute, and the attribute value is true
(2) The dragged element must prevent the default behavior in the dragover and dragenter event values. You don't need to know what these two events do. Let's just write that first!
<body>
<div draggable="true" id="Adiv" class="A">
A---拖拽的元素
</div>
<div id="Bdiv" class="B">
B---A被拖进的元素
</div>
</body>
<script>
Bdiv.ondragover = function(e){
e.preventDefault();
}
Bdiv.ondragenter = function(e){
e.preventDefault();
}
</script>
At this point, the A element can be dragged into the B element.
(Pay attention at this time, it is only the effect of dragging in, it is impossible to make A a real sub-element of B, and it will return to its original state after releasing the mouse)
2. Drag the event of element A
Ok, now we know two important characters A and B, now we focus on A, what events we can control during its dragging:
(1) dragstart method:
This method is triggered on A when the mouse is pressed and the mouse is moved. At the same time, the cursor of the mouse will become disabled until it is dragged to the element that allows A to be placed, and the disabled effect will disappear
And the element that allows to place A is to prevent the default behavior in dragover and dragenter just mentioned
Now let's use an example to demonstrate this method. I hope that when I drag A, I can make A itself turn into a yellow background:
Adiv.ondragstart = function(){
this.style.backgroundColor = 'yellow'
}
(2) drag method
This method occurs after dragstart, as long as it is in the process of dragging, this method will continue to be triggered
Adiv.ondrag = function(){
console.log('drag事件');
}
(3) dragend method
This method is triggered when the dragging ends, that is, when you release the mouse after dragging, it is triggered for a moment.
The above three methods are for dragged elements. That is, the element with the draggable attribute set to true.
Generally, our more commonly used method is the dragstrat method. In this method, the pushed elements are saved, and then subsequent operations are performed.
3. Drag into the event of element B
For the event of dragging the element, it does not require the element to have the draggable attribute, as long as you want, any element can use these methods. But remember the two methods mentioned above to prevent the default behavior of the event.
(1) dragenter method
This method refers to the event triggered by dragging element A and dragging it into B. Of course, any element with the draggable attribute set to true will trigger the change event when it is dragged into B.
Remember, the triggering of this event does not require releasing the mouse
Now let's use an example to illustrate that when A is dragged into B, we hope that A will actually become a child element of B:
Bdiv.ondragenter = function(e){
e.preventDefault();
this.appendChild(Adiv);
}
(2) dragover method
This method will continue to be triggered as long as the dragged element A moves in the target element B.
Bdiv.ondragover = function(e){
console.log('dragover事件');
e.preventDefault();
}
(3) dragleave method
This method refers to dragging element A, which will be triggered when leaving the target element B
Remember here, the event must be triggered when entering B first, and then leaving B, that is to say, the dragenter method must be triggered before the dragleave method can be triggered
(4) drop method
This method means that it is triggered when the dragged element A is placed in the target element B. The difference between it and the dragenter method is that this method needs to be released before the mouse is released . And this method is also the most commonly used method.