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>