title: Disabled Move a dragdrop element when scrolling wheel
body: <p>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 ...</p>
  <p>does not fix the problem
  <em>document.addEventListener(&quot;mousewheel&quot;, function( event ){
  event.preventDefault();
  }, false);</em></p>
  <pre><code>var dragged;
  
  document.addEventListener(&quot;drag&quot;, function( event ){
      //console.log(&quot;A&quot;);
  }, false);
  
  document.addEventListener(&quot;dragstart&quot;, function( event ){
          dragged = event.target;
      //console.log(&quot;B&quot;);
      event.target.style.opacity = .5;
  }, false);
  
  
  document.addEventListener(&quot;dragend&quot;, function( event ){
      
      event.target.style.opacity = &quot;&quot;;
    //console.log(&quot;C&quot;);
  }, false);
  
  document.addEventListener(&quot;dragover&quot;, function( event ){
      event.preventDefault();
    //console.log(&quot;D&quot;);
  }, false);
  
  document.addEventListener(&quot;dragenter&quot;, function( event ){
      if( event.target.className == 'dropzone' ){
      console.log(&quot;E&quot;);
      event.target.style.background = &quot;red&quot;;
    }
  }, false);
  
  document.addEventListener(&quot;dragleave&quot;, function( event ){
      if( event.target.className == 'dropzone' ){
      console.log(&quot;F&quot;);
      event.target.style.background = &quot;&quot;;
    }
  }, false);
  
  
  document.addEventListener(&quot;drop&quot;, function( event ){
      event.preventDefault();
    if( event.target.className == &quot;dropzone&quot; ){
      //console.log(&quot;G&quot;);
      event.target.style.background = &quot;&quot;;
      dragged.parentNode.removeChild(dragged);
      event.target.appendChild( dragged );
    }
  }, false); 
  
  
  // DOES NOT FIX THE PROBLEM
  document.addEventListener(&quot;mousewheel&quot;, function( event ){
      event.preventDefault();
  }, false);
  </code></pre>
  <ul>
  <li></li>
  </ul>
  <pre><code>&lt;div class=&quot;dropzone&quot;&gt;
    &lt;div class=&quot;draggable&quot;
     draggable=&quot;true&quot; 
     ondragstart=&quot;event.dataTransfer.setData('text/plain',null)&quot;&gt;
       Hi!.!
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;dropzone&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;dropzone&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;dropzone&quot;&gt;&lt;/div&gt;
  &lt;style&gt;
  .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;
   }
  &lt;/style&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/92d7nq8h/3/" rel="nofollow noreferrer"><strong>DEMO</strong></a></p>