Абсолютно позиционированные элементы, блокирующие события перетаскивания - PullRequest
Новая
       11

Абсолютно позиционированные элементы, блокирующие события перетаскивания

3 голосов
/ 20 сентября 2019

Я пытаюсь сделать слайдер, но сталкиваюсь с одной проблемой.Проблема, с которой я сталкиваюсь, заключается в том, что абсолютные элементы блокируют события перетаскивания ползунка.Мне нужно как-то разрешить перетаскивание нижележащего изображения через абсолютно позиционированные элементы.У вас есть идея, как этого добиться? ОГРОМНОЕ СПАСИБО! Draggable = "true" не является решением, потому что тогда этот элемент стал перетаскиваемым (и изображение перетаскиваемого перетаскивания становится видимым).Вот мой код: Codepen, если вы предпочитаете: https://codepen.io/saksija/pen/MWgqNeJ

HTML: 

<div id="app">
  <div class="slider" ref="slider">
    <div class="slider-wrapper" ref="sliderContainer">
      <img ref="slide" src="https://image.shutterstock.com/image-photo/really-wide-panoramic-sunrise-shot-260nw-35170.jpg">
      <div v-for="id in 2" :class="['subitem', 'o-'+id]"></div>
    </div>
  </div>
</div>

Vue / Javascript: 

var app = new Vue({
  el: '#app',
  data: () => ({
    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);
  }
})

CSS: 

#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%;
}

1 Ответ

1 голос
/ 20 сентября 2019

Предполагая, что с .subitem не нужно взаимодействовать, вы можете использовать pointer-events:none; для них.EG: 

.subitem {
  position: absolute;
  top: 20%;
  bottom: 20%;
  width: 100px;
  background-color: red;
  user-select: none;
  pointer-events:none;
}
...