title: Fade out entire page except some elements in pure Javascript
body: <p>In the following HTML I have a two div panels. One is on the side with draggable elements and second is main-area where draggable div should be dropped. When drag starts I want the main-area to fade out except few divs which are calculated dynamically with each drag event. I'm using the .fade-out class but it doesn't really work, because an actual application has too many divs as children of main-area, so going through an HTML collection of required divs would not work. So what would be the best way to do this preferably using JavaScript only? </p>
  
  <pre><code>&lt;div class="side-panel"&gt;
      &lt;div draggable="true" ondrag="drag(event)"&gt;&lt;/div&gt;
      &lt;div draggable="true" ondrag="drag(event)"&gt;&lt;/div&gt;
      &lt;div draggable="true" ondrag="drag(event)"&gt;&lt;/div&gt;
      &lt;div draggable="true" ondrag="drag(event)"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="main-area"&gt;
      &lt;div ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  .fade-out {
      filter: alpha(opacity=80);
      opacity: 0.2;
  }
  </code></pre>