Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

243
Visualizações
Disabled Move a dragdrop element when scrolling wheel

I try that when I do MOUSE WHEEL the dragdrop continues to work, in jQuery it works but if I want to make it native in javascript it does not work, has someone happened this? I try to put this event but I can not solve it ...

does not fix the problem document.addEventListener("mousewheel", function( event ){ event.preventDefault(); }, false);

var dragged;

document.addEventListener("drag", function( event ){
    //console.log("A");
}, false);

document.addEventListener("dragstart", function( event ){
        dragged = event.target;
    //console.log("B");
    event.target.style.opacity = .5;
}, false);


document.addEventListener("dragend", function( event ){
    
    event.target.style.opacity = "";
  //console.log("C");
}, false);

document.addEventListener("dragover", function( event ){
    event.preventDefault();
  //console.log("D");
}, false);

document.addEventListener("dragenter", function( event ){
    if( event.target.className == 'dropzone' ){
    console.log("E");
    event.target.style.background = "red";
  }
}, false);

document.addEventListener("dragleave", function( event ){
    if( event.target.className == 'dropzone' ){
    console.log("F");
    event.target.style.background = "";
  }
}, false);


document.addEventListener("drop", function( event ){
    event.preventDefault();
  if( event.target.className == "dropzone" ){
    //console.log("G");
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild( dragged );
  }
}, false); 


// DOES NOT FIX THE PROBLEM
document.addEventListener("mousewheel", function( event ){
    event.preventDefault();
}, false);
<div class="dropzone">
  <div class="draggable"
   draggable="true" 
   ondragstart="event.dataTransfer.setData('text/plain',null)">
     Hi!.!
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<style>
.dropzone{
  width: 200px;
  min-height: 25px;
  margin-bottom: 300px;
  background-color: violet;
  border: 1px solid #9457EB;
  padding: 5px;
  transition: 1000m easy all;
}
.draggable{
  background-color: white;
  padding: 3px;
  text-align: center;
  transition: 400ms ease all;
}
.draggable:hover{
    background-color: yellow;
 }
</style>

DEMO

about 4 years ago · Santiago Trujillo
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda