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. PHP 发邮件《转》

    导读:PHP自带的mail()函数,是php内置发邮件的函数,该函数虽然简单,但是要想真正可以发邮件得有很复杂的配置.不适合新手,以及项目实际的应用的开发. php的mail()函数复杂配置,使得直接 ...

  2. Android使用SDKManager下载SDK速度慢 容易丢包和异常的解决办法

    第一步, SDK Manager启动之后,会先解析一些google的xml文件,会在Log里面打印出一些日志信息. 解析完之后,把日志全部拷贝到一个记事本里(这一步是因为日志窗口不支持查找),在里面查 ...

  3. 快速沃尔变换 FWT

    P4717 [模板]快速沃尔什变换 #include<bits/stdc++.h> using namespace std; #define int long long #define s ...

  4. springCloud分布式事务实战（一）案例需求及实现步骤

    本文不对分布式事务原理进行探索,而是通过一个案例来说明如何使用分布式事务 案例需求:创建2个基于springCloud的微服务,分别访问不同的数据库:然后创建一个整合服务,调用微服务实现数据的保存到2 ...

  5. 关于Anaconda的虚拟环境操作

    # 1.创建虚拟环境 conda create -n env_name python==版本号 # 2.激活虚拟环境 conda activate env_name # 3.下载相关模块 pip in ...

  6. ffmpeg转码指南

    Windows下面的安装: 浏览器打开https://ffmpeg.zeranoe.com/builds/ 选择好版本,位数如果不确定的话就下载32bit的,然后选择static,然后下载 下载完成后 ...

  7. [NN] Guided Backpropgation 可视化

    Pytorch Guided Backpropgation Intro guided backpropgation通过修改RELU的梯度反传,使得小于0的部分不反传,只传播大于0的部分,这样到第一个c ...

  8. 三、Jmeter生成HTML报告

    1.执行jmeter -n -t [接口脚本地址] -l [test.jtl地址] -e -o [报告输出地址] 例如:jmeter -n -t C:\chushujin\youxinscript\j ...

  9. delphi xe2 64位嵌入汇编问题 https://bbs.csdn.net/topics/390333981

    Function xxx(xxx):xxx;assembler;asm  XOR RAX , RAX  ...end;这样的可以. 0 0 引用 ・ 举报 ・ 管理 5t4rk   回复于 2013- ...

  10. html script生成二维码

    <div class="code" align="center"> <p >手机端扫描以下二维码直接观看(支持安卓Android/苹果i ...