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. luogu P1141 01迷宫 x

    P1141 01迷宫 题目描述 有一个仅由数字0与1组成的n×n格迷宫.若你位于一格0上,那么你可以移动到相邻4格中的某一格1上,同样若你位于一格1上,那么你可以移动到相邻4格中的某一格0上. 你的任 ...

  2. 【Leetcode】买卖股票-贪心算法

    题目: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必 ...

  3. CVPR 2018 DeepGlobe

    在刚刚结束的CVPR2018: DeepGlobe Road Extraction Challenge(全球卫星图像道路提取)比赛中,北京邮电大学信息与通信工程学院模式识别实验室张闯老师指导的研究生周 ...

  4. 【SpringBoot-创建项目】一.通过Idea创建SpringBoot项目

    一.首先我们通过Idea创建一个新项目 二.选择sdk和快速构建模板 三.填写项目基本信息 三.选择项目依赖 四.填写项目名和本地项目路径 六.完成项目创建,查看项目目录层级 最终:主要是在创建项目的 ...

  5. sql 查询每天数据

    一 表 内数据存的是 ‘2017-09-08 15:13:59’这样格式 表 customer_mate_follow 时间字段 created_at   1, SELECT ,) as day, C ...

  6. 微信小程序 API 网络（ajax）

    网络 API 类似于 ajax 向服务器请求网络地址,唯一不同的是这个请求有很多的规则,且必须向服务器上请求,不能在本地请求 网络 发送请求: wx.request() 发起https网络请求 参数: ...

  7. RedHat系统文本界面安装图形界面方法

    版本: Linux version 2.6.32-431.el6.x86_64 (mockbuild@x86-023.build.eng.bos.redhat.com) (gcc version 4. ...

  8. HTTP学习记录：一、协议基础

    学习资源主要为:@小坦克HTTP相关博客 1.HTTP简介: HTTP协议是Hyper Text Transfer Portocol(超文本传输协议)的缩写,它是一种通信协议,允许将超文本(即:htm ...

  9. robotframework之用户关键字的用法

    robotframework是一个关键字驱动框架,核心在于关键字的应用 目录 1.如何创建用户关键字 2.调用用户关键字 3.用户关键字的使用场景 1.如何创建关键字 第一种:直接在项目上右键,添加用 ...

  10. 用apicloud+vue的VueLazyload实现缓存图片懒加载

    <script src="../../script/vue-lazyload.js"></script><img v-lazy="remot ...