1.步骤分析：

1.1 获取id

1.2 当鼠标点击时执行的js

1.3当鼠标移动时执行的js

1.4当鼠标放开时执行的js

2.代码实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>拖拽</title>

    <style>

        #div1 {

            position: absolute;

            width: 100px;

            height: 100px;

            border-radius: 50%;

            background-image: url('1.png');

        }

    </style>

    <script>

        window.onload = function() {

            // 获取div

            var oDiv = document.getElementById('div1');

            // 当鼠标点击时执行的js

            oDiv.onmousedown = function() {

                // 拖拽对象的大小(dis) = 鼠标的坐标(event.client) - div的坐标(oDiv.offset)

                var disX = event.clientX - oDiv.offsetLeft;

                var disY = event.clientY - oDiv.offsetTop;

                // 当鼠标移动时执行的js

                document.onmousemove = function() {

                    // 拖拽对象的坐标 = 鼠标的坐标(event.client) - 拖拽对象的大小(dis)

                    oDiv.style.left = event.clientX - disX + 'px';

                    oDiv.style.top = event.clientY - disY + 'px';

                };

                // 当鼠标放开时执行的js

                document.onmouseup = function() {

                    document.onmousemove = null;

                    document.onmouseup = null;

                }

            };

        };

    </script>

</head>

<body>

    <div id="div1"></div>

</body>

</html>

3.核心代码

3.1 拖拽对象的大小(dis) = 鼠标的坐标(event.client) - div的坐标(oDiv.offset)

var disX = event.clientX - oDiv.offsetLeft;

var disY = event.clientY - oDiv.offsetTop;

3.2拖拽对象的坐标 = 鼠标的坐标(event.client) - 拖拽对象的大小(dis)

oDiv.style.left = event.clientX - disX + 'px';

oDiv.style.top = event.clientY - disY + 'px';

js面向过程-拖拽的更多相关文章

  1. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  2. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  3. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  4. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  5. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  6. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

  7. js面向过程改写成面向对象--通用方法

    响亮的标题:一个万能的,保底的.面向过程改写成面向对象的方法 前提朗读:很多刚接触js面向对象的时候都不知道如何能快速的写出一个面向对象的程序,这个是必然的现象,不是每一位学js的一上来就会写面向对象 ...

  8. js实现鼠标拖拽div-------Day44

    假设去问这样一个问题"你认为鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘button那么多,假设手小了或者手法不规范了,太easy出问题了,也对操作的速 ...

  9. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

随机推荐

  1. sh_10_分隔线模块

    sh_10_分隔线模块 def print_line(char, times): """打印单行分隔线 :param char: 分隔字符 :param times: 重 ...

  2. 在Eclipse中搭建Android开发环境

    忙活了两天多的时间,终于在Eclipse中成功搭建了Android开发环境,着实不易啊!! 原本我用的编译器是MyEclipse的,但是从网上找不到如何在MyEclipse中搭建环境,于是乎就换了Ec ...

  3. Oracle-执行./runInstaller报错，弹不出图形界面

    [root@Apexmic Packages]# xhost + 无论是root用户还是oracle用户均执行了xhost + 但还是报以下错误 [oracle@Apexmic database]$ ...

  4. 【Python】学习笔记三：序列

    sequence(序列) sequence(序列)是一组有序的元素的集合,序列可以有任何元素,也可以没有元素 元组与表的区别:一旦建立,tuple的各个元素不可再变更,而list的各个元素可以再变更 ...

  5. nginx下的负载均衡

    负载均衡应用场景: 普通web应用部署到多台应用服务器上,客户端通过访问应用服务器发送请求,最简单的就是n对1模式,n个客户端访问同一个应用服务器,这种情况当并发量大了,就无法应对,而且,如果只有一台 ...

  6. Vue使用axios请求数据，默认post请求传参是json格式，但后台需要formData格式？？？

    最简单的方式,post请求参数json转formData…代码如下: 使用node的 qs 模块(推荐使用) 就是这么简单,在结合element ui表单一键提交涉及到,希望遇到的同学少走弯路,加油~

  7. JRE、JDK、JVM 及 JIT 之间有什么不同

    java虚拟机(JVM)     使用java编程语言的主要优势就是平台的独立性.你曾经想知道过java怎么实现平台的独立性吗?对,就是虚拟机,它抽象化了硬件设备,开发者和他们的程序的得以操作系统.虚 ...

  8. webpack安装低于4版本(没有配置webpack.config.js)

    webpack安装低于4版本(没有配置webpack.config.js) webpack 无需配置输出参数-o 低版本  1.初始化项目 npm init -y 初始化项目 2.安装webpack@ ...

  9. pip安装报错：Fatal error in launcher: Unable to create process using '"'

    pip安装包报错 解决方案: pip需要升级,可使用以下脚本: python -m pip install -U pip

  10. 【Python】—— 获取当前运行函数名称和类方法名称

    原文出处: python笔记19-获取当前运行函数名称和类方法名称 获取函数名称 1.在函数外部获取函数名称,用.__name__获取 2.函数内部获取当前函数名称,用sys._getframe(). ...