title: Absolute positioned elemets blocking drag events
body: <p>I am trying to make slider, but I run into one issue.
  The problem I am facing at is that absolute items block slider drag events.
  I need somehow to allow dragging underlying image to be draggable through absolute positioned items.
  Do you have a idea how to achieve that?
  <strong><em>MANY THANKS IN ADVANCE!</em></strong>
  Draggable="true" is not a solution because then that element became draggable (and ghost dragging image is visible).
  Here is my code:
  Codepen if you prefer: <a href="https://codepen.io/saksija/pen/MWgqNeJ" rel="nofollow noreferrer">https://codepen.io/saksija/pen/MWgqNeJ</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;div class="slider" ref="slider"&gt;
      &lt;div class="slider-wrapper" ref="sliderContainer"&gt;
        &lt;img ref="slide" src="https://image.shutterstock.com/image-photo/really-wide-panoramic-sunrise-shot-260nw-35170.jpg"&gt;
        &lt;div v-for="id in 2" :class="['subitem', 'o-'+id]"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Vue/Javascript:</p>
  
  <pre><code>var app = new Vue({
    el: '#app',
    data: () =&gt; ({
      startX: 0,
      lastTranslate: 0,
      translate: 0
    }),
    watch: {
      translate(value) {
        this.$refs.sliderContainer.style.transform = `translate3d(${value}px, 0px, 0px)`;
      }
    },
    methods: {
      dragStart(event) {
        this.startX = event.screenX;
      },
      dragEnd(event) {
        this.translate = this.lastTranslate;
      },
      dragMove(event) {
        if (event.screenX === 0) return;
  
        let distance = event.screenX - this.startX;
        let newTranslate = this.translate + distance;
        let sliderContainer = this.$refs.sliderContainer;
  
        this.lastTranslate = newTranslate;
        sliderContainer.style.transform = `translate3d(${newTranslate}px, 0px, 0px)`;
      },
    },
    mounted() {
      let slider = this.$refs.slider;
      slider.addEventListener('dragstart', this.dragStart);
      slider.addEventListener('drag', this.dragMove);
      slider.addEventListener('dragend', this.dragEnd);
    }
  })
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#app {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .slider {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
  }
  .slider-wrapper {
    position: relative;
    display: block;
    height: 100%;
  }
  .slider img {
    position: relative;
    display: block;
    height: 100%;
  }
  .subitem {
    position: absolute;
    top: 20%;
    bottom: 20%;
    width: 100px;
    background-color: red;
    user-select: none;
  }
  .subitem.o-1 {
    left: 3%;
  }
  .subitem.o-2 {
    left: 20%;
  }
  </code></pre>