Created
December 9, 2021 19:23
-
-
Save dmitry-kurmanov/44e480157fecf28011974a4a5e97bc63 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<title>Drag Drop Touch Example</title> | |
<style> | |
.top, .bottom { | |
width: 100%; | |
height: 200px; | |
font-size: 25px; | |
} | |
.top { | |
background-color: tomato; | |
} | |
.bottom { | |
background-color: orange; | |
} | |
.item { | |
height: 200px; | |
width: 200px; | |
background-color: palegreen; | |
margin: 50px; | |
font-size: 100px; | |
border: 3px solid burlywood; | |
box-sizing: border-box; | |
} | |
div { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
flex-direction: column; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="top"> | |
scrollable zone | |
</div> | |
<div class="list"> | |
<div class="item">1</div> | |
<div class="item">2</div> | |
<div class="item">3</div> | |
<div class="item">4</div> | |
<div class="item">5</div> | |
</div> | |
<div class="bottom"> | |
scrollable zone | |
</div> | |
</body> | |
<script> | |
let preventScrolling = false; | |
// WebKit requires cancelable `touchmove` events to be added as early as possible | |
window.addEventListener( | |
'touchmove', | |
(event) => { | |
if (!preventScrolling) { | |
return; | |
} | |
// Prevent scrolling | |
event.preventDefault(); | |
}, | |
{passive: false}, | |
); | |
const onTouchStart = (e)=>{ | |
if (!e.target.classList.contains("item")) return; | |
preventScrolling = true; | |
}; | |
const onTouchMove = (e)=> { | |
}; | |
const onTouchEnd = (e)=> { | |
preventScrolling = false; | |
}; | |
document.addEventListener('touchstart', onTouchStart); | |
document.addEventListener('touchmove', onTouchMove); | |
document.addEventListener('touchend', onTouchEnd); | |
</script> | |
</html> |
Author
dmitry-kurmanov
commented
Dec 10, 2021
<script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
<title>Drag Drop Touch Example</title>
<style>
.top, .bottom {
width: 100%;
height: 200px;
font-size: 25px;
}
.top {
background-color: tomato;
}
.bottom {
background-color: orange;
}
.item {
height: 200px;
width: 200px;
background-color: palegreen;
margin: 50px;
font-size: 100px;
border: 3px solid burlywood;
box-sizing: border-box;
}
div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>
scrollable zone
scrollable zone
<script>
let preventScrolling = false;
// WebKit requires cancelable `touchmove` events to be added as early as possible
window.addEventListener(
'touchmove',
(event) => {
if (!preventScrolling) {
return;
}
// Prevent scrolling
event.preventDefault();
},
{passive: false},
);
function ViewModel() {
this.items = ko.observableArray([{index: 1}, {index: 2}, {index: 3}, {index: 4}, {index: 5}, {index: 6}]);
this.onTouchStart = (data, e)=>{
if (!e.target.classList.contains("item")) return;
preventScrolling = true;
document.addEventListener('touchmove', this.onTouchMove);
document.addEventListener('touchend', this.onTouchEnd);
return true;
};
this.onTouchMove = (e)=> {};
this.onTouchEnd = (e)=> {
preventScrolling = false;
};
}
ko.applyBindings(new ViewModel());
</script>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment