效果：

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. [Bayesian] “我是bayesian我怕谁”系列 - Latent Variables

    下一章有意讲讲EM和变分推断的内容. EM和变分推断的内容能Google到很多,虽然质量乘次不齐,但本文也无意再赘述那么些个细节. 此处记录一些核心思想,帮助菜鸡形成整体上的认识.不过,变分推断也不是 ...

  2. Spring AOP中级——应用场景

    在<Spring AOP初级——入门及简单应用>中对AOP作了简要的介绍,以及一些专业术语的解释,同时写了一个简单的Spring AOPdemo.本文将继续探讨Spring AOP在实际场 ...

  3. 用Python从零开始创建区块链

    本文主要内容翻译自Learn Blockchains by Building One 本文原始链接,转载请注明出处. 作者认为最快的学习区块链的方式是自己创建一个,本文就跟随作者用Python来创建一 ...

  4. linux学习（六）绝对路径、相对路径、cd、mkdir、rmdir、rm

    一.绝对路径 就是从根开始的,如:/root./usr/local. 二.相对路径 相对于当前路径的,比如我们在当前路径下建立了一个a.txt. [root@iZ25lzba47vZ ~]# pwd ...

  5. 剑指offer（一）

    面试题3:二维数组中查找 题目描述: 在一个二维数组中,每一行都按照从左往右递增地顺序排序,每一列都按照从上往下递增的顺序排序.请完成一个函数,输入这样的一个数组和一个整数,判断数组中是否存在该整数. ...

  6. 定时器解决js长时间运行脚本问题

    一般地,单个js操作的运行时间不应超过100毫秒,否则的话,会影响用户体验,用户会认为自己与界面失去联系.而对于一些复杂的任务,可能无法在100ms内完成,甚至会突破浏览器限制(调用栈大小限制和长时间 ...

  7. windows查看端口占用命令

    开始--运行--cmd 进入命令提示符 输入netstat -aon 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...

  8. 如何优雅的设计 React 组件

    作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...

  9. EasyUI扩展验证

    1.首先在jquery.easyui.min.js下最后插入下面代码 $.extend($.fn.validatebox.defaults.rules, { idcard : {// 验证身份证 va ...

  10. div内长串数字或字母不断行处理

    比如: <div>1111tryrt645645rt4554111112324353453454364</div> <div>qwewretrytuytuiyiuo ...