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. 苹果手机上input的button按钮颜色显示问题

    在苹果手机上的input按钮自带效果,需要加上outline:0px; -webkit-appearance:none; 清除原有样式,同时苹果手机上的input按钮自带圆角需要按需要去掉 input ...

  2. eclipse设置酷炫的代码颜色风格

    eclipse安装默认的代码颜色风格是“白色背景”,颜色有些刺眼,于是想到手动去改eclipse的代码颜色,但改来改去还是很难达到我们的要求,甚至有时候将背景和某些代码的颜色改成相同,导致代码看不见. ...

  3. [CSP-S模拟测试]:简单计算（数学）

    题目传送门(内部题104) 输入格式 第一行一个正整数$T$,表示该测试点内的数据组数,你需要对该测试点内的$T$组数据都分别给出正确的答案才能获得该测试点的分数. 接下来$T$组数据,每组数据一行两 ...

  4. vscode Vue格式化HTML标签换行问题

    解决方法:在设置里面直接贴上代码: "vetur.format.defaultFormatter.html": "js-beautify-html", &quo ...

  5. 系统性能信息模块--psutil

    #安装psutil模块#pip install psutil -i https://pypi.doubanio.com/simple #导入psutil模块import psutilimport da ...

  6. 屏蔽ffmpeg命令的所有提示

    有时候需要隐蔽的执行ffmpeg不希望输出任何日志,提示.这个时候只需要多添加这个参数即可 -loglevel quiet

  7. pyhton2与pyhton3切换

    ubuntu中默认的Python版本是Python2.X,但是现在Python的最新版本是Python3.X. 那么怎么修改ubutun系统默认的Python解释器呢? 如果没有安装,则使用以下命令安 ...

  8. 如果将get请求转换成post请求

    td><a href="emp/${emp.id}">Edit</a></td> <form action="" ...

  9. Windows下开发环境搭建

    安装Make: https://sourceforge.net/projects/gnuwin32/ 安装G++:https://sourceforge.net/projects/mingw/

  10. WPF DevExpress Chart控件多Y轴，指定数据参考的Y轴

    当Chart中有两个及以上的Y轴时,我们就要指明图表中的柱子或折线对应的是哪个Y轴了,这时候需要指明柱子或者折线的dxc:XYDiagram2D.SeriesAxisY属性,来设置对应的Y轴(dxc: ...