移动端拖动元素

最新推荐文章于 2022-11-12 17:20:15 发布
最新推荐文章于 2022-11-12 17:20:15 发布
阅读量882 收藏 3
点赞数
分类专栏： 移动端 javascript demo 文章标签： 移动端 拖动元素 js touch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39517183/article/details/106560151
版权
本文介绍了如何在移动端实现元素拖动功能，通过监听touchstart、touchmove和touchend事件，结合手指移动的距离来改变元素的位置，实现拖动效果。拖动过程中需计算手指从开始到移动中的位移，并将该位移应用于元素的坐标更新。注意防止页面滚动干扰拖动操作。
摘要由CSDN通过智能技术生成

移动端拖动元素

  1. touchstart、touchmove、touchend可以实现拖动元素；
  2. 拖动元素需要当前手指的坐标值 可以使用targetTouches[0]里面的pageX和pageY;
  3. 移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离；
  4. 手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置；

拖动元素三部曲：

  1. 触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置；
  2. 移动手指touchmove:计算手指滑动距离，并且移动盒子；
  3. 离开手指touchend；

注意:手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
最低0.47元/天 解锁文章
昵称2-20个字符
关注
专栏目录
移动端 拖拽元素
weixin_49884163的博客
08-19 237
** （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置 （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子 （3） 离开手指 touchend:** e.targetTouches[0].pageX 、e.targetTouches[0].pageY 这两个为手指移动时 在页面上的坐标； <script> var div = document.querySelector('div'); var startX
移动端：拖拽元素
m0_57835615的博客
06-04 317
<!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&g...
JavaScript实现移动端拖动元素
01-21
本文实例为大家分享了JavaScript实现移动端拖动元素的具体代码，供大家参考，具体内容如下 实现效果： 请切换到移动端页面查看！ 代码实现： <!DOCTYPE html> <html lang=en> <head> <meta ...
Vue移动端实现元素拖拽移动
showkw的博客
04-14 1964
Vue移动端实现元素拖拽移动 <template> <div ref="dragBox" @touchstart="touchstartHandle('dragBox',$event)" @touchmove="touchmoveHandle('dragBox',$event)"> 可拖拽元素 </div> </template> data() { return {
PC端、移动端拖拽元素
bluelotos893的博客
11-12 510
PC端、移动端拖拽元素
支持移动触摸设备的纯js元素拖放插件
01-20
支持移动触摸设备的纯js元素拖放插件
JavaScript 移动端拖动元素
火星基地
10-26 3171
实现效果： 请切换到移动端页面查看！ 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed
JS移动端拖动元素
weixin_46513544的博客
04-22 355
需要注意的是，书写css时，相对定位不要忘记 移动端移动的核心思路：1、计算手指移动的距离：手指移动之后的坐标 -手指初始化坐标 2、盒子移动距离：手指移动的距离加上盒子初始化坐标 3、需要touchstart、touchmove 搭配使用 4、这时需要注意区分PC端的方法mouseover mouseout mousemove 5、最后e.preventDefault()是用来防止屏幕滚动的默...
dom 拖拽样式_可视化拖拽交互详解
weixin_39619451的博客
11-29 559
简介拖拽在可视化中是非常常见的交互，但是想把拖拽交互做好并不容易，既需要对 DOM 的拖拽机制有充分的了解，也需要可视化的绘图引擎提供良好的拖拽支持。我们常见的拖拽交互可以大体上分为三个场景：画布内部的拖拽画布外部元素拖拽到画布内画布内的图形拖拽到画布外接下来我们会详细的讨论这三个场景，同时讲解绘图引擎（G 4.0）如何实现一套完备的拖拽模型，我们先从 DOM 的拖拽事件开始。G 是 AntV 几...
移动端元素随意移动-JQ
天天向上
03-29 209
/*拖动事件*/ var restaruantBtn=$("#restaruantBtn"); var restaruantBtnW=$("#restaruantBtn").width(); var restaruantBtnH=$("#restaruantBtn").height(); var restBtnX,restBtnY,restBtnMoveX,re...
移动端拖拽
leos
08-28 400
var flag = false; var cur = { x:0, y:0 } var nx,ny,dx,dy,x,y ; function down(){ flag = true; var touch ; if(event.touches){ touc...
原生js小案例：移动端触屏拖动元素
小硅壳的博客
02-19 1125
使用事件： touchstart、touchmove 核心： 上述两个事件中，e.targetTouches[0]对象内部的pageX 和 pageY 属性代表触摸点的X、Y坐标 原理： 手指移动中，计算出手指移动的距离。然后设置盒子位置为：初始位置 + 手指移动的距离 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置 步骤： 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子初始位置 移动手指 touchmove： 计算手指的滑动距离，更新盒子位置（定位
移动端：div在手机页面上随意拖动
weixin_34228387的博客
03-08 653
1 <!doctype html> 2 <html> 3 <head> 4 <title>弹窗</title> 5 <meta charset="utf-8"> 6 <script type="text/javascript" src="h...
html5移动端：元素拖动/触控touch（js）(jquery)
热门推荐
u010242159的专栏
08-30 1万+
*{   margin: 0;   padding: 0;   font-family: arial;   } #main{ width: 100px; height: 100px; background:#ccc;    position:absolute;    left: 10px;    top:20px;   /* position:relative;*/
js实现同时兼容pc和移动端的元素拖拽功能
最新发布
05-24
要实现同时兼容 PC 端和移动端的元素拖拽功能，可以使用 HTML5 新增的 drag 事件和 touch 事件。 首先，需要将元素设置为可拖拽，可以使用 draggable 属性。例如： ```html <div draggable="true">可拖拽的元素</div> ``` 然后，需要监听元素的 dragstart、drag、dragend 事件或 touchstart、touchmove、touchend 事件来实现拖拽效果。 在 PC 端，可以使用 drag 事件来实现拖拽效果，例如： ```javascript var dragElement = document.getElementById('drag-element'); dragElement.addEventListener('dragstart', function(event) { // 拖拽开始时，保存拖拽元素的 ID event.dataTransfer.setData('text/plain', event.target.id); }); document.body.addEventListener('dragover', function(event) { // 阻止默认拖拽行为 event.preventDefault(); }); document.body.addEventListener('drop', function(event) { // 阻止默认拖拽行为 event.preventDefault(); // 获取拖拽元素的 ID var id = event.dataTransfer.getData('text/plain'); var dragElement = document.getElementById(id); // 将拖拽元素添加到放置区域 event.target.appendChild(dragElement); }); ``` 在移动端，可以使用 touch 事件来实现拖拽效果，例如： ```javascript var dragElement = document.getElementById('drag-element'); var startX, startY; dragElement.addEventListener('touchstart', function(event) { startX = event.touches[0].clientX; startY = event.touches[0].clientY; }); dragElement.addEventListener('touchmove', function(event) { var offsetX = event.touches[0].clientX - startX; var offsetY = event.touches[0].clientY - startY; // 移动元素 this.style.transform = 'translate(' + offsetX + 'px, ' + offsetY + 'px)'; }); dragElement.addEventListener('touchend', function(event) { // 拖拽结束时，清除 transform 样式 this.style.transform = ''; }); ``` 需要注意的是，移动端的 touch 事件可能会和浏览器默认行为冲突，需要使用 preventDefault() 方法来阻止默认行为。另外，由于移动端的屏幕尺寸多样化，需要根据具体情况来调整拖拽的逻辑和样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值