纯H5+CSS实现拖拽效果
H5+CSS3实现拖拽效果,可设置超出范围自动滚回
PC端与移动端的写法在触发事件和获取触发点到屏幕边距有所不同
本篇以移动端为例,PC端将事件与获取边距方式修改即可
PC端获取鼠标与窗口左边距 event.clientX 鼠标事件 onmousedown onmousemove onmouseup
移动端获取触摸点与窗口左边距 event.touches[0].pageX 触摸事件 ontouchstart ontouchmove ontouchend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
<script>
let box = document.querySelector('.box')
function tuozhuai(dom, leftDistance, rightDistance){