Skip to content

Instantly share code, notes, and snippets.

@WangShuXian6
Last active May 22, 2019 07:39
Show Gist options
  • Save WangShuXian6/205e1eb918c3003383b2f81f5c5f36e0 to your computer and use it in GitHub Desktop.
Save WangShuXian6/205e1eb918c3003383b2f81f5c5f36e0 to your computer and use it in GitHub Desktop.
拖拽移动
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.up {
display: flex;
width: 100%;
height: 50vh;
background-color: antiquewhite;
}
.down {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50vh;
background-color: aliceblue;
}
.dragable {
z-index: 2;
display: flex;
width: 100px;
height: 100px;
background-color: aquamarine;
}
.dragable.fix {
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ease {
transition: all 0.3s linear;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>touch</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no, minimum-scale=1.0">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="main">
<div class="up">
</div>
<div class="down">
<div class="dragable"></div>
<div class="dragable fix"></div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
const dragableDiv = document.querySelector('.dragable')
let startX
let startY
let translateX = 0
let translateY = 0
let translateXLast = 0
let translateYLast = 0
function touchStart(event) {
event.preventDefault()
if (!event.touches.length) return;
let touch = event.touches[0]
startX = touch.pageX;
startY = touch.pageY;
}
function touchMove(event) {
event.preventDefault();
if (!event.touches.length) return;
let touch = event.touches[0]
let x = touch.pageX - startX
let y = touch.pageY - startY;
translateX = x
translateY = y
dragableDiv.style.transform = `translate(${translateXLast + x}px, ${translateYLast + y}px)`
}
function touchEnd(event) {
translateXLast += translateX
translateYLast += translateY
endAnimation()
}
function init() {
dragableDiv.addEventListener('touchstart', touchStart, false)
dragableDiv.addEventListener('touchmove', touchMove, false)
dragableDiv.addEventListener('touchend', touchEnd, false)
}
function endAnimation() {
dragableDiv.classList = 'dragable ease'
dragableDiv.style.transform = `translate(${translateXLast}px, ${translateYLast - 200}px`
dragableDiv.style.opacity = 0
setTimeout(() => {
reset()
}, 500)
}
function reset() {
translateX = 0
translateY = 0
translateXLast = 0
translateYLast = 0
dragableDiv.classList = 'dragable'
dragableDiv.style.transform = `translate(${0}px, ${0}px`
dragableDiv.style.opacity = 1
}
init()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment