效果：

HTML和CSS部分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>拖拽demo</title>

    <style>

    #mydiv{

        position: absolute;

        top: 0;

        left: 0;

        width: 100px;

        height: 100px;

        cursor: pointer;

        background-color: #de98f0;

    }

    </style>

</head>

<body>

    <div id="mydiv"></div>

</body>

</html>

　　

Js部分

<script>

    var block = document.getElementById("mydiv");

     var oW, oH;

     block.addEventListener("touchstart", function(e) {

         var touches = e.touches[0];

         oW = touches.clientX - block.offsetLeft;

         oH = touches.clientY - block.offsetTop;

         document.addEventListener("touchmove", defaultEvent, false);

     }, false)

     block.addEventListener("touchmove", function(e) {

         var touches = e.touches[0];

         var oLeft = touches.clientX - oW;

         var oTop = touches.clientY - oH;

         if (oLeft < 0) {

             oLeft = 0;

         } else if (oLeft > document.documentElement.clientWidth - block.offsetWidth) {

             oLeft = (document.documentElement.clientWidth - block.offsetWidth);

         }

         if (oTop < 0) {

             oTop = 0;

         } else if (oTop > document.documentElement.clientHeight - block.offsetHeight) {

             oTop = (document.documentElement.clientHeight - block.offsetHeight);

         }

         block.style.left = oLeft + "px";

         block.style.top = oTop + "px";

     }, false);

     block.addEventListener("touchend", function() {

         document.removeEventListener("touchmove", defaultEvent, false);

     }, false);

     function defaultEvent(e) {

         e.preventDefault();

     }

</script>

　　

原生Js实现拖拽（适用于pc和移动端）的更多相关文章

  1. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  2. 原生js实现拖拽功能

    1. 给个div,给定一些样式 <div class="drag" style="left:0;top:0;width:100px;height:100px&quo ...

  3. 手把手教你做一个原生js拖动滑块【兼容PC和移动端】

    废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...

  4. js之拖拽事件

    js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...

  5. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  6. JS—实现拖拽

    JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...

  7. js鼠标拖拽

    html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...

  8. 原生API实现拖拽上传文件实践

    功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...

  9. js 利用jquery.gridly.js实现拖拽并且排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. hibernate的操作Blob和Clob类型数据（笔记）

  2. java自动化-juint框架简述

    本人使用的是java的juint框架来组织的自动化测试,故我这边需要简单介绍一下juint框架 首先,建议自行百度一下juint框架,先有一个大概的了解 所谓的接口自动化测试,会对多个接口中每一个接口 ...

  3. 本地存储之localStorage

    localStorage 本地存储 .对象.存数据 .取数据 存储的数据量在20M左右 localStorage 是window下面的属性,用的时候可以省略window 数据只能存储字符串类型的 lo ...

  4. 2017上海QCon之旅总结（下）

    本来这个公众号的交流消息中间件相关的技术的.十月去上海参加了QCon,第一次参加这样的技术会议,感受挺多的,所以整理一下自己的一些想法接公众号和大家交流一下. 三天的内容还挺多的,之前已经有上篇和中篇 ...

  5. centos 下安装jdk、tomcat 以及tomcat无法从外部访问的解决办法

    centos 下安装jdk.tomcat 以及tomcat无法从外部访问的解决办法 原创 2014年08月28日 10:24:33 标签: selinux enforce cent 2223 昨天在c ...

  6. 用Nodejs+Express搭建web，nodejs路由和Ajax传数据并返回状态，nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  7. Spring IOC容器分析(2) -- BeanDefinition

    上文对Spring IOC容器的核心BeanFactory接口分析发现:在默认Bean工厂DefaultListableBeanFactory中对象不是以Object形成存储,而是以BeanDefin ...

  8. 都说 WebP 厉害，究竟厉害在哪里？

    之前在< WebP 的前世今生 >一文中,介绍了 WebP 图片格式是由 Google 基于 VP8 视频编码格式研发的,同时提供有损压缩和无损压缩两种格式,那么今天就来看看 WebP 有 ...

  9. hadoop启动name失败

    namenode失败十分的常见, 1.java.io.EOFException; Host Details : local host is: "hadoop1/192.168.41.134& ...

  10. 史上最完整的PS快捷键（绝对经典）

    快速恢复默认值 有些不擅长Photoshop的朋友为了调整出满意的效果真是几经周折,结果发现还是原来的默认效果最好,这下傻了眼,后悔不该当初呀!怎么恢复到默认值呀?试着轻轻点按选项栏上的工具图标,然后 ...