Disabled Move a dragdrop element when scrolling wheel
Asked Answered
B

0

1

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

Brimstone answered 22/12, 2021 at 5:47 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.