阻止拖动事件的绝对定位元素

Posted 2023-05-08

【中文标题】阻止拖动事件的绝对定位元素

【英文标题】：Absolute positioned elemets blocking drag events

【发布时间】：2020-01-21 18:26:48

【问题描述】：

我正在尝试制作滑块，但遇到了一个问题。 我面临的问题是绝对项目会阻止滑块拖动事件。 我需要以某种方式允许通过绝对定位的项目拖动底层图像。 你知道如何实现这一目标吗？ 非常感谢！ 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($valuepx, 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($newTranslatepx, 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%;

【问题讨论】：

尝试将滑块的z-index 设置为大于绝对元素的z-index。或者，将pointer-events:none; 添加到绝对元素。

我尝试了 z-index，但没有成功。但是指针事件很有魅力！谢谢！

【参考方案1】：

假设.subitem 不需要交互，您可以在它们上使用pointer-events:none;。例如：

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