Method for creating DRAG and DROP effect
Having come to DRAG and DROP for the first time, I came across a very difficult description of it (This is my subjective opinion. I ask you not to agree with him, but to re-read everything that is possible and look at this question from many angles). And I decided to write a couple of articles aimed at beginning developers who want to learn Zen.
The article will consist of two parts:
Before starting a deep analysis, let's look superficially. Imagine yourself as a loader, you need to move the box from one place to another. For the loader, “Well, I took it, well, I transferred it. Done! ”, And for the programmer,“ I went to the box, bent over, took the box, picked up the box, walked N steps, bent over, let go of the box. ”. I mean, before starting work, lose everything in your head, step by step and you will become much closer to the truth.
I want to make a reservation that there are several methods for creating this effect and be sure to read about all. I will take advantage of the one that I currently consider the most convenient.
When creating DRAG and DROP, the first step is to set the object we will be moving to draggable = 'true'.
,
At the first stage, I want to show the process itself, and after that we will spread it to all objects. We are currently working in JS and, as you know, there are various events in the browser to which we can attach our own sequences of actions. Let's look at the necessary events for creating DRAG and DROP:
dragstart - occurs when the user starts to drag an item.
drag - occurs when an item is being dragged.
dragend - occurs when the user has finished dragging the item.
dragenter - occurs when the dragged item hits the target.
dragleave - occurs when the dragged item leaves the target.
dragover - occurs when the dragged item is above the target.
drop - occurs when the dragged item falls on the target object.
Now very important information! Events are divided into two groups. For the moved item (the one we are dragging): dragstart, Drag, Dragend. For the receiving element (where we drag it): Dragenter, Dragleave, Dragover, Drop. And these events cannot work the other way around, but they can work without each other.
For example: You need to move the object and leave it where we released the mouse button. This task does not require a host part.
Undoubtedly, the example is done on the knee, but it illustrates perfectly the optionality of the receiving object.
I consider examples with individual events to nothing, because if in the line d1.addEventListener ('dragstart', function () { you replace 'dragstart' with any other event, you can play with it and get interesting results. , play and show what seemed unusual and interesting to you in the comments, so everyone will learn a lot and will be able to repeat it.
When you try all the events, you will find that drop does not work. It’s the developers of this method who make the atat to those who decided "And that’s it ... Huh, nonsense."
Well, everything is simple, before the drop event, you need to hang an event on the same element
Take this as a fact; it won’t work without it.
The article will consist of two parts:
- Method for creating DRAG and DROP effects.
- Practical application of the knowledge gained to create sorting using DRAG and DROP
Paragraph 1 Method of creating DRAG and DROP effect
Before starting a deep analysis, let's look superficially. Imagine yourself as a loader, you need to move the box from one place to another. For the loader, “Well, I took it, well, I transferred it. Done! ”, And for the programmer,“ I went to the box, bent over, took the box, picked up the box, walked N steps, bent over, let go of the box. ”. I mean, before starting work, lose everything in your head, step by step and you will become much closer to the truth.
I want to make a reservation that there are several methods for creating this effect and be sure to read about all. I will take advantage of the one that I currently consider the most convenient.
When creating DRAG and DROP, the first step is to set the object we will be moving to draggable = 'true'.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> </body> </html>
,
At the first stage, I want to show the process itself, and after that we will spread it to all objects. We are currently working in JS and, as you know, there are various events in the browser to which we can attach our own sequences of actions. Let's look at the necessary events for creating DRAG and DROP:
dragstart - occurs when the user starts to drag an item.
drag - occurs when an item is being dragged.
dragend - occurs when the user has finished dragging the item.
dragenter - occurs when the dragged item hits the target.
dragleave - occurs when the dragged item leaves the target.
dragover - occurs when the dragged item is above the target.
drop - occurs when the dragged item falls on the target object.
Now very important information! Events are divided into two groups. For the moved item (the one we are dragging): dragstart, Drag, Dragend. For the receiving element (where we drag it): Dragenter, Dragleave, Dragover, Drop. And these events cannot work the other way around, but they can work without each other.
For example: You need to move the object and leave it where we released the mouse button. This task does not require a host part.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> <div id='d2' class='ddd'>Vtoroy 2</div> <div id='d3' class='ddd'>Tretii 3</div> <div id='d4' class='ddd'>Chetverty 4</div> <div id='d5' class='ddd'>Pyatii 5</div> <script> var d1 = document.getElementById('d1'); var startCursorX; var startCursorY; var startX; var startY; d1.addEventListener('dragstart',function() { startCursorX = event.pageX;// X startCursorY = event.pageY;// Y startX = d1.style.marginLeft.replace('px','')*1; // PX startY = d1.style.marginTop.replace('px','')*1; }); d1.addEventListener('dragend',function() { d1.style.position = 'absolute';//CSS "" :) d1.style.marginLeft = startX + event.pageX-startCursorX; // + - d1.style.marginTop = startY + event.pageY-startCursorY; // , }); </script> </body> </html>
Undoubtedly, the example is done on the knee, but it illustrates perfectly the optionality of the receiving object.
I consider examples with individual events to nothing, because if in the line d1.addEventListener ('dragstart', function () { you replace 'dragstart' with any other event, you can play with it and get interesting results. , play and show what seemed unusual and interesting to you in the comments, so everyone will learn a lot and will be able to repeat it.
Paragraph No. 2. DROP does not work in DRAG and DROP
When you try all the events, you will find that drop does not work. It’s the developers of this method who make the atat to those who decided "And that’s it ... Huh, nonsense."
Well, everything is simple, before the drop event, you need to hang an event on the same element
d2.addEventListener('dragover',function() { event.preventDefault(); });
Take this as a fact; it won’t work without it.
All Articles