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. VMware NAT模式下，公司代理下上网 续

    这是在非公司环境下,VMware NAT 静态IP模式下上网 由于公司的限制,可能需要通过proxy上网. 下面是我在公司的配置(参考其他) 1. 修改 /etc/environment http_p ...

  2. Spring Cloud Stream教程（四）消费群体

    虽然发布订阅模型可以轻松地通过共享主题连接应用程序,但通过创建给定应用程序的多个实例来扩展的能力同样重要.当这样做时,应用程序的不同实例被放置在竞争的消费者关系中,其中只有一个实例预期处理给定消息. ...

  3. Httpwatch抓包

    一.下载Httpwatch 二.抓包 1.启动Httpwatch 打开浏览器-选择工具-Httpwatch professional(仅适用于IE和火狐40及以下浏览器) 2.开始抓包 点击“Reco ...

  4. Integer类源码浅析

    1.首先Integer提供了两类工具类,包括把一个int类型转成二进等, 其实执行转换算法只有一个方法: public static String toString(int i, int radix) ...

  5. VLC for Android编译

    编译环境是ubuntu 64bit 全程参考https://wiki.videolan.org/AndroidCompile/ 一:环境准备 1.安装系统 尽量使用最新的ubuntu系统 可以省去很多 ...

  6. python - del 方法

    转自:http://blog.csdn.net/love1code/article/details/47276683 python中的del用法比较特殊,新手学习往往产生误解,弄清del的用法,可以帮 ...

  7. C# App.config 自定义 配置节

    1)App.config <?xml version="1.0" encoding="utf-8" ?><configuration>  ...

  8. 4.2.k8s.Ingress-Nginx

    Ingress-Nginx ingress-nginx为7层代理,通过配置域名访问后端服务 ingress-nginx容器和kubernetes api交互,动态生成nginx配置 ingress服务 ...

  9. 4.1.k8s.svc(Service)

    #Service Service为Pod提供4层负载均衡, 访问 -> Service -> Pod组 #4种类型 ClusterIP 默认,分配一个VIP,只能内部访问 NodePort ...

  10. setTimeout(function(){}, 0);

    for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i); } 结果 ...