效果：

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. 磨刀不误砍柴工！vs2010快捷键大全

    最常用的快捷键: VS2012变化的快捷键: 注释::VS2010是(Ctrl+E,C),VS2012是(Ctrl+K, Ctrl+C),实际操作,按住Ctrl键不放,先按K键,再按C键.相当于Ctr ...

  2. 2015-2016 ACM-ICPC, NEERC, Southern Subregional Contest A Email Aliases（模拟STL vector+map）

    Email AliasesCrawling in process... Crawling failed Time Limit:2000MS     Memory Limit:524288KB     ...

  3. windy数（数位DP）

    windy数Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:165888KB     64bit I ...

  4. html5客户端本地存储之sessionStorage及storage事件

    首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...

  5. form 表单处理

    submit相关 当使用 submit 按钮或者 image  或者button type="submit"   来提交表单时,会触发 submit 事件,但是直接javascri ...

  6. salesforce零基础学习（八十二）审批邮件获取最终审批人和审批意见

    项目中,审批操作无处不在.配置审批流时,我们有时候会用到queue,related user设置当前步骤的审批人,审批人可以一个或者多个.当审批人有多个时,邮件中获取当前记录的审批人和审批意见就不能随 ...

  7. 【APP问题定位(一)】夜神模拟器安装及问题

    本文较少下夜神模拟器的使用,包括了夜神安装,APK安装,开发者选项打开. 安装夜神模拟器 到    夜神模拟器     网站自行下载安装文件,双击exe文件安装,选择"自定义安装" ...

  8. java的linux命令

    1.查找文件find / -name filename.txt 根据名称查找/目录下的filename.txt文件.find . -name “*.xml” 递归查找所有的xml文件2.查看一个程序是 ...

  9. mac中利用brew实现多版本php共存以及任意切换

    1.安装brew 参考链接:https://brew.sh/index_zh-cn.html 2.安装php56 brew install homebrew/php/php56 3.配置php56 因 ...

  10. SQL中锁表语句简单理解(针对于一个表)

    锁定数据库的一个表 复制代码代码如下: SELECT * FROM table WITH (HOLDLOCK) 注意: 锁定数据库的一个表的区别 复制代码代码如下: SELECT * FROM tab ...