Drag & Drop Com ReactJS
Projeto Básico de Estudo ReactJS
As interfaces de Drag and Drop (arrastar e soltar) habilitam aplicações a usar funcionalidades de arrastar e soltar através do navegador, hoje basta você colocar na tag draggable="true" assim já fica habilitado a funcionalidade no browser para arrastar e soltar. A partir dai basta manipular os eventos referentes ao arrastar e soltar
Neste exemplo estamos trabalhando com alguns eventos apenas, mas você pode estar atuando com todos!
| Event | On Event Handler | Description |
|---|---|---|
| drag | ondrag | Acionado quando um elemento ou seleção de texto está sendo arrastado. |
| dragstart | onDragStart | Acionado quando o usuário começa a arrastar um elemento válido ou seleção de texto. |
| drop | onDrop | Acionado quando um elemento ou seleção de texto é solta em um ponto d soltura (drop target) válido. |
| dragover | onDragOver | Acionado quando um elemento ou seleção de texto está sendo arrastado sobre um ponto de soltura válido (a cada aproximadamente 100 milisegundos). |
| dragEnter | onDragEnter | Acionado quando um elemento arrastável ou seleção de texto entra em um ponto de soltura (drop target). |
| dragEnd | onDragEnd | Acionado quando uma operação de arrastar está terminando (por eexmplo, ao soltar o botão do mouse ou pressionar a tecla esc). |
Link para documentação DragDrop: MSDN Doc Drag & Drop