Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to disable pointer-events, but allow drag without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
I’m trying to create a sidebar menu for the mobile web page. My goal is to slide-out side-bar from 25% of screens left edge.
A similar way is used in Materialize frameworks Sidenav
#drag-target is used to receive drag events and slide-out sidebar.
Problem is that #drag-target covers part of the content and blocks click/touch events on underlying elements.
I used CSS rule pointer-events: none but this breaks swipe on the element itself.
Is there any way to pass touch/click events through the #drag-target on all underlying elements, except swipe/drag?
Answer
As it’s not possible to catch events with pointer-events: none applied, I ran to another way by handling events on the whole body and manually sliding side-bar.
After struggling with Hammer.js I came with working side-bar but found out that, Hammer has a little bug with Pan events and sometimes event was giving incorrect delta. So I decided to listen to basic TouchEvents.
Here is the result if it will be helpful to anyone: https://codepen.io/pen/xxbNwmX
P.S. Test it from Touch-enabled devices or browser emulator
/**
* @class Sidenav
* @constructor
*/
class Sidenav {
/**
* @param wrapper {String | jQuery}
* @param sidenav {String | jQuery}
* @param [hitArea] {number}
* @param [threshold] {number}
*/
constructor (wrapper, sidenav, hitArea = .20, threshold = 20) {
// settings
this.wrapper = wrapper
this.sidenav = sidenav
this.hitArea = window.innerWidth * hitArea
this.threshold = threshold
this.width = $(sidenav).width()
this.isHitarea = false
this._state = 'closed'
this.states = 'open closed open-started close-started'
this.touchStart = 0
// touch start
$(this.wrapper).on('touchstart', (e) => {
let touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]
this.touchStart = touch.pageX
this.isHitarea = this.touchStart < this.hitArea
})
// touch move
$(this.wrapper).on('touchmove', (e) => {
let touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]
let delta = touch.pageX - this.touchStart
this.slide(delta)
})
// touch end
$(this.wrapper).on('touchend', (e) => {
let touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]
let delta = touch.pageX - this.touchStart
if (this.state == 'open-started') {
this.state = Math.abs(delta) >= this.width / 4 ? 'open' : 'closed'
}
else if (this.state == 'close-started') {
this.state = Math.abs(delta) >= this.width / 4 ? 'closed' : 'open'
}
})
}
/** @param st {String} */
set state (st) {
this._state = st
// remove all classes
$(this.wrapper).removeClass(this.states).addClass(st)
}
get state () {
return this._state
}
slide (delta) {
switch (this.state) {
case 'closed':
if (this.isHitarea && delta >= this.threshold) {
this.state = 'open-started'
this.move(delta - this.threshold)
}
break
case 'open-started':
this.move(delta - this.threshold)
break
case 'open':
if (delta < 0 && Math.abs(delta) > this.threshold) {
this.state = 'close-started'
let translate = Math.max(-this.width, delta + this.threshold)
this.move(translate, 1)
}
break
case 'close-started':
let translate = Math.min(Math.max(-this.width, delta + this.threshold), 0)
this.move(translate, 1)
break
}
}
move (delta, left = false) {
if (left) {
$(this.wrapper).css('transform', `translateX(${delta}px)`)
}
else {
$(this.wrapper).css('transform', `translateX(${Math.min(-this.width + delta, 0)}px)`)
}
}
}
// run
$(function() {
let sidenav = new Sidenav('.wrapper', '.sidenav')
})* {
margin: 0;
padding: 0
}
html,body {
width: 100%;
height: 100%;
overflow: hidden
}
body {
background-color: #202126;
font-family: Consolas, sans-serif;
color: antiquewhite
}
.wrapper {
position: relative;
height: 100%;
touch-action: pan-x !important;
transform: translateX(-240px)
}
.wrapper .sidenav {
position: fixed;
left: 0;
top: 0;
width: 240px;
height: 100%;
background-color: antiquewhite;
color: #202126;
box-sizing: border-box;
padding: 10px
}
.wrapper .content {
height: 100%;
transform: translateX(240px);
padding: 10px;
overflow-y: scroll;
overflow-x: hidden
}
.wrapper .content button {
padding: 10px
}
.wrapper.open {
transform: translateX(0) !important;
transition: transform .2s ease-in-out
}
.wrapper.closed {
transform: translateX(-240px) !important;
transition: transform .2s ease-in-out
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper closed">
<div class="sidenav">
<h2>SIDENAV</h2>
</div>
<div class="content">
<h2>CONTENT</h2>
<p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
<br>
<button onclick="alert('Click click!')">Clickable button</button>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda consequatur debitis doloribus, dolorum esse incidunt nobis obcaecati omnis possimus quasi, quidem recusandae reiciendis rerum tempora unde velit vitae voluptates.</p>
<br>
</div>
</div>
We are here to answer your question about How to disable pointer-events, but allow drag - If you find the proper solution, please don't forgot to share this with your team members.