js触摸拖动切换div
基础概念
JavaScript 触摸拖动切换 div 是一种常见的交互设计，允许用户通过触摸屏幕来拖动元素，从而实现页面内容的切换。这种功能通常用于移动设备上的应用或网页，以提供更直观和便捷的用户体验。
相关优势
- 直观性：触摸拖动操作符合人类的直觉，用户无需学习复杂的指令即可使用。
- 响应性：实时反馈用户的操作，增强了交互的即时感。
- 灵活性：适用于多种场景，如图片轮播、页面导航等。
类型
- 水平滑动：常见于图片轮播或标签页切换。
- 垂直滑动：适用于内容较多的列表或卡片式布局。
- 自由拖动：允许用户在任意方向上拖动元素。
应用场景
- 移动应用界面：如新闻阅读器、社交媒体应用等。
- 网页设计：网站的首页导航、产品展示页面等。
- 游戏界面：某些互动性强的游戏会用到这种交互方式。
实现方法及示例代码
以下是一个简单的 JavaScript 示例，展示如何实现水平滑动切换 div：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Touch Drag to Switch Divs</title>
<style>
.container {
display: flex;
overflow: hidden;
width: 100%;
}
.item {
min-width: 100%;
height: 200px;
transition: transform 0.3s;
}
#item1 { background-color: red; }
#item2 { background-color: green; }
#item3 { background-color: blue; }
</style>
</head>
<body>
<div class="container" id="container">
<div class="item" id="item1"></div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
</div>
<script>
let startX = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;
const container = document.getElementById('container');
const items = document.querySelectorAll('.item');
container.addEventListener('touchstart', touchStart);
container.addEventListener('touchmove', touchMove);
container.addEventListener('touchend', touchEnd);
function touchStart(event) {
startX = event.touches[0].clientX;
cancelAnimationFrame(animationID);
}
function touchMove(event) {
const currentX = event.touches[0].clientX;
currentTranslate = prevTranslate + currentX - startX;
setTransform(currentTranslate);
}
function touchEnd() {
const movedBy = currentTranslate - prevTranslate;
if (movedBy < -100 && currentTranslate > -100) {
currentTranslate -= window.innerWidth;
} else if (movedBy > 100 && currentTranslate < 0) {
currentTranslate += window.innerWidth;
}
prevTranslate = currentTranslate;
setTransform(currentTranslate);
animationID = requestAnimationFrame(smoothTransition);
}
function setTransform(translate) {
container.style.transform = `translateX(${translate}px)`;
}
function smoothTransition() {
setTransform(prevTranslate);
if ((prevTranslate > -100 && currentTranslate < -100) || (prevTranslate < 0 && currentTranslate > 0)) {
cancelAnimationFrame(animationID);
} else {
animationID = requestAnimationFrame(smoothTransition);
}
}
</script>
</body>
</html>可能遇到的问题及解决方法
- 滑动不流畅：
- 原因：可能是由于页面重绘或回流导致的性能问题。
- 解决方法：使用
transform属性进行位移，因为它不会触发重绘和回流，性能更好。
- 触摸事件与鼠标事件冲突：
- 原因：在桌面浏览器上测试时，触摸事件可能与鼠标事件同时触发。
- 解决方法：可以通过检测用户代理（User Agent）来区分设备类型，或在事件处理函数中添加条件判断。
- 边界处理不当：
- 原因：当用户滑动到边界时，可能会出现不自然的跳转或卡顿。
- 解决方法：在
touchend事件中添加逻辑，判断滑动的距离和方向，从而决定是否切换到下一个或上一个元素。
通过以上方法，可以实现一个基本的触摸拖动切换 div 的功能，并解决一些常见问题。
相关·内容
1回答
拖动并触摸其他div元素
、、、、
我在一个应用程序上工作-*我们需要通过触摸拖动一个元素。-我已经做了那个事件。*之后，我们必须拖动和触摸其他div类元素才能打开超链接？head.js("js/jquery.min.js","js/ui.js","js/touch.js", function (){
$(".b
浏览 1提问于2013-10-21得票数 0
1回答
10px; width: 101px;</style><script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></
浏览 3提问于2016-11-18得票数 0
2回答
我有一个简单的DIV面板，当用户单击并拖动一个较小的选项卡时，我想在其中滑动。有很多教程可以用来显示点击和滑动元素等，但这需要用户点击一个按钮来显示面板。
浏览 4提问于2011-02-17得票数 0
回答已采纳
如果可以手动从长指针或其他地方调用拖动会更好吗？
我的代码有一个可删除和y滚动的Container。它已经在其中拖动了Components。我还能做些什么让他们在一起玩得很好吗？
浏览 0提问于2014-02-28得票数 0
回答已采纳
我使用的noUiSlider在一个基础6离开画布菜单，滑块手柄将不会拖动触摸设备。如果noUiSlider嵌套在离开画布菜单之外，甚至在使用鼠标拖动手柄时，它在离开画布菜单中也能正常工作。然而，当我模拟触摸事件，或者实际上试图拖动触摸设备上的滑块手柄时，滑块手柄不会移动并保持固定位置。>
<div class="row align-middle" id="fr_wrapper_price_slider" dat
浏览 0提问于2018-06-24得票数 1
jquery滑块ui有以下问题：(为了简单起见，JS代码在slider2.html中。)
浏览 2提问于2010-06-02得票数 0
2回答
基本上，我已经将"touchmove“事件(通过jQuery)绑定到一组div。我希望发生的事情是，当你在每个div上拖动(不带touchend)时，div的attr "xyz“会从0切换到1，也就是说它被触摸了。$("#itBoardFront div").on('touchmove',function(e){})
正如
浏览 0提问于2012-04-02得票数 1
回答已采纳
1回答
mouseDown(e){}
var div= document.getElementById('app'); div.style.left = e.clientX +'px';我有一点CSS和JS，如上所述
浏览 3提问于2014-02-18得票数 1
每当我为TouchListView设置OnClickListener时，DropListener和DragListener就无法工作。那么，我应该如何实现TouchListView的OnClickListener呢？谢谢。
浏览 0提问于2012-01-04得票数 0
2回答
--我将更详细地解释我的意思，：有一种方法可以通过用光标拖动整个屏幕，或者用手指触摸屏幕。然后，你就可以在离你的位置最近的地方拍照了。div还可以根据分辨率和改变屏幕大小进行调整。有许多jquery插件可以让您快速切换到div，或者在屏幕上移动一个对象，但是没有达到我想要的程度。
这是我的第一篇文章，所以如果有什么我可以补充的东西可以帮助你，请告诉我。下面是一个向div快照的例子，这是我所能找到的最多的一个。<script src="src/jquery.scr
浏览 3提问于2014-05-28得票数 2
回答已采纳
我的触摸函数定义是 console.log('dragstart: ',id)<div onTouchStart={(e)=>this.onTouchStart(e, id)}
draggable
浏览 0提问于2018-06-02得票数 1
1回答
<div id="makeMeScrollable"> <<a data-toggle="pill" href="http://rxx.pay1.in/#data">datacard</a>
浏览 0提问于2015-11-10得票数 0
2回答
拖放是阻塞触摸事件
、、、、
我试图用拖动来来回移动一个div。这个部分可以正常工作，直到div具有可滚动的内容。这不是桌面上的问题，因为滚动条，但问题发生在触摸设备。因为触摸事件与拖动事件相冲突，所以我无法滚动内容。我试图创建一个条件来检测拖动是否是水平的，而不是垂直的。
我希望在垂直触摸交互过程中防止拖动，但是UI拖动方法仍然会触发和重写触摸事件。我正在使用触摸-穿孔插件，使拖曳的工作在触摸</em
浏览 6提问于2013-10-09得票数 3
回答已采纳
麻烦的是，由于这个东西的框架(说来话长)，我不得不用require.js加载我的依赖项。我也需要使用路线和视图。($data, $event)">Drag here to remove card</div>它在个人电脑上的Chrome上运行得很好，但是当我在Android上试用它时，我就不能触摸-拖动。ngDraggable附带的示例使用触摸拖动，但是它们直接在html中加载了ngDraggab
浏览 3提问于2015-05-25得票数 0
回答已采纳
1回答
我有一个div，我在其中动态地创建了1到10个div，现在我想从触摸中拖动它们，而不是从鼠标或光标拖动它们。现在，如何使这些动态创建的触摸和可拖动同时。任何帮助
numbers.sortfunction() { re
浏览 0提问于2013-09-13得票数 0
回答已采纳
为了切换到全屏或从全屏切换，在UITableView上检测“快速触摸”的编码是什么？特别是，这是因为用户在UITableView上，他们仍然需要能够向上/向下拖动项目列表，并有可能单击单元格/行以深入挖掘。但如果他们快速触摸，那么这可能是在全屏模式(即导航栏和工具栏)之间切换的触发器。背景-当我说切换到/从全屏切换时，我指的是执行什么是，然而在这个答案中，并没有提到如何将其插入UINavigationController堆
浏览 0提问于2011-03-25得票数 0
回答已采纳
我正在尝试重新创建Gmail (在Android上)“点击删除”界面。在这个GUI中，用户可以
有更有效的方法来处理这个动画吗？
浏览 0提问于2013-12-05得票数 4
2回答
我有一个数据报警器控制器，当用户接触到屏幕上的某个不是数据报警器的地方时，我想要模糊它。我的问题是，我不明白是什么触发了模糊事件。例如，如果用户下个月触及模糊事件，那么我想说，如果relatedTarget是数据报器内部的一个类(下个月)，那么就显示下一个月，如果relatedTarget不在日历上，就不要隐藏它。问题是relatedTarget总是没有定义。在移动Safari上的模糊事件是什么？为什么在移动Safari中event.relatedTarget属性总是没有定义？
浏览 0提问于2011-02-21得票数 5
我想有一个符号和一些文字一起移动一个拖动手势，但我希望只有识别和拖动的手势是基于触摸的符号，而不是文字也。现在，获得拖动工作是很好的，但位置和拖动是基于符号和文本的组合。下面是一个简单的例子：struct DragView: View { @State private var newPos: CGPointGeometryReader { geo in
浏览 6提问于2022-12-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
