效果：

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. Python CRM项目一

    开发环境: 语言Python3.X以上 MTV WEB框架 Django 前端框架 jQuery+bootstrap 数据库 MySQL 运行环境 安装Python3.x 安装Django 除IE8以 ...

  2. java 随记

    后台开发的过程中积累的关于java的杂记 架构 SSH框架 为什么要分层? 因为分层使代码变得清晰,容易写也容易阅读,更重要的是让代码扩展性更好,层与层之间的改动不会互相影响 各层的分工 dao--与 ...

  3. Ionic3 创建应用后，目录结构

    ionic start myApp blank (空项目) hooks --编译cordova时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中 node_modules --node各类依 ...

  4. YARN到底是怎么一回事？

    文章思路: 首先提出第一代MRv1(MapReduce Version1.0)的局限性,然后解释YARN是怎么克服这些局限性的,接着说了YARN的编程模型,说了YARN的组成,YARN的通信协议和YA ...

  5. HDFS的接口（命令行接口和Java接口）--笔记

    HDFS 文件的系统访问的接口 1.Hadoop的shell命令脚本 hadoop fs -ls   列出某一个目录下的文件 hadoop fs -lsr 递归的方式列出所有文件 hadoop fs ...

  6. Selenium WebDriver 中鼠标和键盘事件分析及扩展[转载]

    原文:http://www.ibm.com/developerworks/cn/java/j-lo-keyboard/ 概念 在使用 Selenium WebDriver 做自动化测试的时候,会经常模 ...

  7. MySQL5.6的optimizer_trace

    MySQL的explain是各种执行计划选择的结果,如果想看整个执行计划以及对于多种索引方案之间是如何选择的? MySQL5.6中支持这个功能,optimizer_trace 这个是mysql的参数, ...

  8. PowerShell 操作 Azure Blob Storage

    本文假设已经存在了一个 Azure Storage Account,需要进行文件的上传,下载,复制,删除等操作.为了方便查看 PowerShell 代码执行的结果,本文使用了 MS 发布的一个 Azu ...

  9. pyqt5实现打开子窗口

    # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import * from PyQt5.QtCore import * class Fi ...

  10. Java数据结构和算法（一）——简介

    本系列博客我们将学习数据结构和算法,为什么要学习数据结构和算法,这里我举个简单的例子. 编程好比是一辆汽车,而数据结构和算法是汽车内部的变速箱.一个开车的人不懂变速箱的原理也是能开车的,同理一个不懂数 ...