效果：

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. myeclipse10破解失败，正解

    此文图借用他人的,很是经典 第一步:输入任意用户名 第二步:点击Systemid... 按钮,自动生成本机器的systemid.ps:确定本机的systemid,如果和破解器生成不一致,需要copy本 ...

  2. 老大哥在看着你！我国部署超2000万个AI监控系统

    原文:Big brother is watching you! China installs 'the world's most advanced video surveillance system' ...

  3. 收集—— css实现垂直居中

    Method1: 在父元素上设置display:table-cell;vertical-align:middle(父元素不能设置浮动) Method2: 使用flex:父元素设置成display: f ...

  4. 如何用 Graylog 管理日志？- 每天5分钟玩转 Docker 容器技术（93）

    上一节已经部署好了 Graylog,现在学习如何用它来管理日志. 首先启动测试容器. docker run -d \ --log-driver=gelf \ --log-opt gelf-addres ...

  5. ANDROID基础ACTIVITY篇之Activity的生命周期（一）

    首先我们先来看一下官方的Android的生命周期图: 根据这个流程图我们可以看到Activity的生命周期一共有7个方法,那么接下来我们就来聊聊这些方法执行过程. 首先在两个Activity(Main ...

  6. web前端-----第一弹html

    HTML 初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s ...

  7. 程序、计算机程序、java初论

    一.程序? 程序一词来自生活,通常指完成某些事情的一种既定方式和过程,可以将程序看成对一系列动作的执行过程的描述. 例如:个人去银行取钱 1.带上存折/银行卡去银行 2.取号排队 3.将存折或储蓄卡递 ...

  8. Spring集成Quartz完成定时任务

    在JavaEE系统中,我们经常会用到定时任务,比如每天晚上凌晨之后跑批处理或者是每天某个时刻群发消息等等. 我们可以使用java.util.Timer结合java.util.TimerTask来去完成 ...

  9. linux 安装nginx 详解

    1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. n gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...

  10. 使用canvas绘制时钟 （http://heeroluo.net/Article/Detail/95）

    准备工作 在HTML中指定一个区域放置时钟: <div id="clock" style="position: relative;"></di ...