search

iurygdeoliveira / Web-development-classes

Repository aimed at building collaborative knowledge about web development, especially with the computer science students at Campus Araguaína - IFTO. However, anyone can contribute if they wish to do so.
4 stars 40 forks source link

30º Desafio - Drag N Drop - Peso 2 #35

Closed iurygdeoliveira closed 1 year ago

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Queridas crianças inocentes, tenho um desafio emocionante para vocês! Vamos criar juntos o efeito Drag N Drop, onde vocês poderão arrastar e soltar elementos na página.

Vamos lá, para começar, precisamos entender que o Drag N Drop é um recurso que permite a interação do usuário com a página. Para isso, precisamos utilizar HTML, CSS e JS.

No HTML, precisamos criar elementos que possam ser arrastados, como imagens ou caixas de texto. No CSS, podemos personalizar o estilo dos elementos e criar um feedback visual durante o processo de arrastar. Já no JS, precisamos definir o comportamento do elemento ao ser arrastado e solto, como sua posição na página.

Para criar esse efeito, vocês podem utilizar os eventos de mouse e touch do JS, como o evento "dragstart" para iniciar o arraste e o evento "drop" para soltar o elemento no local desejado.

Além disso, podemos utilizar comandos de CSS como "cursor: grab" para mudar o cursor do mouse ao segurar um elemento e "pointer-events: none" para desabilitar a interação com outros elementos durante o arraste.

Então, crianças inocentes, vamos colocar as mãos na massa e criar um efeito Drag N Drop incrível! Lembrem-se de praticar bastante e explorar diferentes opções de personalização e interação para deixar o projeto ainda mais divertido.

Exemplo:

https://user-images.githubusercontent.com/30157522/224492170-68ba4201-e262-43c3-a690-c6eb3080e163.mp4

Additional tips

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Drag N Drop</title>
  </head>
  <body>
    <div class="empty">
      <div class="fill" draggable="true"></div>
    </div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>

    <script src="script.js"></script>
  </body>
</html>
GiorgeLucas commented 1 year ago

Equipe Vikings

Resultado

_C__Users_XNull_Desktop_Programa%C3%A7%C3%A3o_Desafios%20de%20Desenvolvimento%20Web_Desafio%2030_index html (1)

HTML

<!DOCTYPE html>
<html lang=pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Drag N Drop</title>
  </head>
  <body>
    <div class="empty">
      <div class="fill" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>
    </div>
    <div class="empty" ondragover="dragOver(event)" ondrop="drop(event)"></div>
    <div class="empty" ondragover="dragOver(event)" ondrop="drop(event)"></div>
    <div class="empty" ondragover="dragOver(event)" ondrop="drop(event)"></div>
    <div class="empty" ondragover="dragOver(event)" ondrop="drop(event)"></div>

    <script src="script.js"></script>
  </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.empty {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    margin: 5px;
    position: relative;
}

.fill {
    width: 100px;
    height: 100px;
    background-image: url("https://source.unsplash.com/random/150x150");
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

JS

let dragElement;

function dragStart(event) {
  dragElement = event.target;
  event.dataTransfer.setData("text", dragElement.innerHTML);
  event.target.style.opacity = "0.4";
}

function dragEnd(event) {
  event.target.style.opacity = "1";
}

function dragOver(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  event.target.appendChild(dragElement);
  dragElement.style.opacity = "1";
}