JavaScript实现移动端拖动元素

本文实例为大家分享了JavaScript实现移动端拖动元素的具体代码，供大家参考，具体内容如下

实现效果：

请切换到移动端页面查看！

代码实现：

<!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=edge">
  <title>Document</title>
  <style>
    body {
      background-color: #1cee89;
    }

    div {
      position: absolute;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: #8294ff;
      border-radius: 20px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    var startX = 0; // 获取手指初始坐标
    var startY = 0;
    var x = 0; // 获得盒子原来的位置
    var y = 0;
    // 手指触摸
    div.addEventListener('touchstart', function(e) {
      // 获取手指初始坐标
      startX = e.targetTouches[0].pageX;
      startY = e.targetTouches[0].pageY;
      x = this.offsetLeft;
      y = this.offsetTop;
      this.style.boxShadow = '0 0 15px rgba(0, 0, 0, .6)';
    });
    // 手指离开
    div.addEventListener('touchend', function(e) {
      this.style.boxShadow = '';
    });

    // 手指按住移动
    div.addEventListener('touchmove', function(e) {
      // 计算手指的移动距离：手指移动之后的坐标减去手指初始的坐标
      var moveX = e.targetTouches[0].pageX - startX;
      var moveY = e.targetTouches[0].pageY - startY;
      // 移动盒子 盒子原来的位置 + 手指移动的距离
      this.style.left = x + moveX + 'px';
      this.style.top = y + moveY + 'px';
      e.preventDefault(); // 阻止屏幕滚动的默认行为
    });
  </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现适配移动端的拖动效果

    js实现适配移动端的拖动效果

    本文实例为大家分享了js实现适配移动端的拖动效果,供大家参考,具体内容如下 1.html <div id="div1"> <div id="div2"></div> </div> 2.js var flag = false; var cur = { x: 0, y: 0 } var nx, ny, dx, dy, x, y; function down() { flag = true; var touch; if(ev

  • js实现兼容PC端和移动端滑块拖动选择数字效果

    本文为大家分享了js实现移动端滑块拖动选择数字的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="viewport&qu

  • js实现一个可以兼容PC端和移动端的div拖动效果实例

    js实现一个可以兼容PC端和移动端的div拖动效果实例

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touchmove.touchend事件.还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.

  • 原生js实现的移动端可拖动进度条插件功能详解

    本文实例讲述了原生js实现的移动端可拖动进度条插件功能.分享给大家供大家参考,具体如下: 该插件最初的想法来自网上的一篇文章,直达链接://www.jb51.net/article/167717.htm 笔者因为业务需要寻找到这个插件,然后拿来用之,发现各种不方便,然后便开始了改造之路. 上代码: <script> function dragSlide(id) { this.minDiv =document.getElementById(id); //小方块 this.width = pars

  • 原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】

    原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】

    本文实例讲述了原生js实现可兼容PC和移动端的拖动滑块功能.分享给大家供大家参考,具体如下: 废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代PC端的"mouse"事件. 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t

  • JavaScript实现移动端拖动元素

    本文实例为大家分享了JavaScript实现移动端拖动元素的具体代码,供大家参考,具体内容如下 实现效果: 请切换到移动端页面查看! 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia

  • javascript实现拖动元素交换位置

    javascript实现拖动元素交换位置

    本文实例讲述了javascript实现拖动元素交换位置的代码.分享给大家供大家参考.具体如下: 实现目标:可拖动元素拖动到另外一个元素位置的时候,互相交换位置. 启发来源:最初形式是网上看到的一个拼图小游戏. 运行效果截图如下: 具体代码如下: 代码: body,ul,li{margin:0;padding:0;} ul{list-style: none;} body{font:13px/1.5 Tahoma;} #box{position:relative;width:435px;height

  • 原生javascript实现拖动元素示例代码

    本文介绍原生javascript实现元素拖动. 思路: 1.首先改变被拖动元素的布局属性,关键是"position:absolue": 2.捕捉鼠标事件"mousedown","mousemove","mouseup": 3.当触发"mousedown"时,记录下当前鼠标在元素中的相对位置,_x,_y: 4.紧接着处理"mousemove"事件,通过改变元素的top和left属性来移动元

  • JavaScript 实现鼠标拖动元素实例代码

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.fn.draggable插件,在接触一些资料和别人的思路,今天终于把这个拖动功能给完善了,下面就来看看它的实现 二.设计思路 在拖动元素上绑定鼠标按下事件,在文档对象中绑定鼠标移动,鼠标弹起事件:为什么不把三个事件都绑定在拖动元素上,这是因为鼠标移动太快时,鼠标移动和弹起事件处理程序将不会执行 复制代

  • jQuery动态添加可拖动元素完整实例(附demo源码下载)

    jQuery动态添加可拖动元素完整实例(附demo源码下载)

    本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&

  • JavaScript实现移动端带transition动画的轮播效果

    JavaScript实现轮播的方式多种多样,桌面的移动端的实现方式都是大同小异的,具体的核心实现原理不外乎下面几个要点.即: 1. 确定播放方向.一般都是横向轮播,当然不排除纵向的需求可能.当然还有反向播放情况,这个自定义. 2. 对第一张图片的处理.如果当前是第一张了,那么如果继续往前面(就是你播放方向的反向)滑动,那么就会出现留白(如果你允许继续滑动的话,不过不允许滑动也没有啥意思了,除非你想来回轮播,这个我在另一篇用jQuery也说明过),此时应该让你的左边显示应该轮播图片的最后一张,实现

  • javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能.分享给大家供大家参考,具体如下: 在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后

  • vue实现移动端拖动排序

    本文实例为大家分享了vue实现移动端拖动排序的具体代码,供大家参考,具体内容如下 效果 代码: <template> <div> <div class="mainDiv" id="columns"> <div id="child" class="childDiv" v-for="(option,index) in options" :key="index&

  • JavaScript实现移动端签字功能

    JavaScript实现移动端签字功能

    本文实例为大家分享了JavaScript实现移动端签字功能的具体代码,供大家参考,具体内容如下 一.html部分 <div class="mui-content-padded"> <div class="mui-inline"><font style="font-family: '微软雅黑';font-size: 1.2rem;">验收人签字:</font></div> </div

  • JavaScript之移动端H5生成图片解决方案讲解

    现在有很多微信公众号运营活动,都有生成图片的需求,生成图片后可以发送给好友和发到朋友圈扩散,利于产品的宣传! 1. 生成图片可以用canvas,但是由于已经有了html2canvas这个开源库,所以为了节省时间就没有自己写了 github地址: html2canvas LiveDemo /** * 根据window.devicePixelRatio获取像素比 */ function DPR() { if (window.devicePixelRatio && window.devicePi

随机推荐