Javascript 绝对定位元素阻止拖动事件
我试图制作滑块,但遇到了一个问题。 我面临的问题是绝对项会阻止滑块拖动事件。 我需要以某种方式允许通过绝对定位的项目拖动底层图像。 你有办法做到这一点吗? 非常感谢强> Draggable=“true”不是一个解决方案,因为该元素变成了可拖动的(并且可以看到重影拖动图像)。 这是我的密码: Codepen如果您愿意: HTML: CSS:Javascript 绝对定位元素阻止拖动事件,javascript,css,vue.js,draggable,drag,Javascript,Css,Vue.js,Draggable,Drag,我试图制作滑块,但遇到了一个问题。 我面临的问题是绝对项会阻止滑块拖动事件。 我需要以某种方式允许通过绝对定位的项目拖动底层图像。 你有办法做到这一点吗? 非常感谢 Draggable=“true”不是一个解决方案,因为该元素变成了可拖动的(并且可以看到重影拖动图像)。 这是我的密码: Codepen如果您愿意: HTML: CSS: 假设不需要与.subitem交互,则可以使用指针事件:无在他们身上。例如: .subitem { position: absolute; top: 20%
假设不需要与
.subitem
交互,则可以使用指针事件:无代码>在他们身上。例如:
.subitem {
position: absolute;
top: 20%;
bottom: 20%;
width: 100px;
background-color: red;
user-select: none;
pointer-events:none;
}
尝试将滑块的z索引设置为大于绝对元素的索引。或者,添加指针事件:无代码>到绝对元素。我尝试了z索引,但没有成功。但指针事件是一种魅力!谢谢
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);
}
})
#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%;
}
.subitem {
position: absolute;
top: 20%;
bottom: 20%;
width: 100px;
background-color: red;
user-select: none;
pointer-events:none;
}