一个元素放置页面上。如何进行拖拉，实现想放哪里就放哪里的效果呢？

效果如下：

如果让你写这个效果，你会如何写呢？

--- 思路分析：我首先想到的是，对这个元素先绑定一个事件。（什么事件？ 那当然是鼠标按下时的事件啦？ ）   那么绑定这个事件具体做啥子呢？ 在绑定这个事件之前。我们需要先了解如下几个事情--

　　1. 元素如何才能在页面上移动？  （是不是要脱离文档流呢？ OK / 这时我们给设置一个position：absolute /  让其绝对定位。

　　2. 获取元素当前距离页面两边的位置

　　3. 获取鼠标距离页面两边的位置

　　4.求得鼠标距离元素边框的距离

　　5.在鼠标移动事件中。设置元素的left , top  值 。 便可以使元素动起来啦 。

　　6. 在鼠标抬起的时候，清掉鼠标移动和鼠标抬起事件。

--- 下面是具体的代码：

<!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>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div{

            position: absolute;

            width: 100px;

            height: 100px;

            background-color: red;

            top:100px ;

            left:100px;

        }

    </style>

</head>

<body>

    <button id="btn">test</button>

    <div id="dv"></div>

    <script>

        //  鼠标点击元素开启监听事件

        dv.addEventListener('mousedown',(e)=>{

            // 计算鼠标箭头和元素的左边缘和上边缘的距离

            var disX = e.pageX - dv.offsetLeft

            var disY = e.pageY - dv.offsetTop

            // console.log(dv.offsetLeft)

            // 当点击时，会一直触发监听鼠标的移动事件（监听document

            // document.addEventListener('mousemove', (e) =>{

            //     // console.log(e)

            //     // 设置元素的移动距离

            //     dv.style.left = e.pageX - disX + 'px'

            //     dv.style.top = e.pageY - disY + 'px'

            // })

            // document.addEventListener('mouseup',(e) =>{

            //     // 移除两个事件

            //     document.removeEventListener('mosedown',(e) =>{

            //           // console.log(e)

            //     // 设置元素的移动距离

            //     dv.style.left = e.pageX - disX + 'px'

            //     dv.style.top = e.pageY - disY + 'px'

            //     })

            //     document.removeEventListener('mosueup',() =>{})

            // })

            // // 阻止默认事件

            // console.log(e.preventDefault())

            document.onmousemove = function(e){

                dv.style.left = e.pageX - disX + 'px'

                dv.style.top = e.pageY - disY + 'px'

            }

            document.onmouseup = function(){

                document.onmousemove = document.onmouseup = null

            }

            e.preventDefault()

            // 总结： 使用addEventLister()  在移除事件的实际不方便！！ 还是采用普通的事件监听函数～～

        })

    </script>

</body>

</html>　　　　　　

好了～～～今天的分享就先到这里啦！ 还有一点其他的知识留着明天分享吧！～～～每天分享一点～     2019-04-25 23:15:39

值得注意的是：获取距离的几个方法：  如：target.offsetTop /  e.pageY   / 等

每日分享！～ 使用js原生方式对拖拉元素（鼠标的事件）的更多相关文章

  1. js原生方式实现bind方法

    1.思路 (1)因为bind方法不会立即执行函数,需要返回一个待执行的函数(这里用到闭包,可以返回一个函数)return function(){} (2)作用域绑定,这里可以使用apply或者call ...

  2. js 原生_拖动页面元素，松开释放

    嗯哼.不多说,直接上代码了. // 为元素 绑定拖动事件 function bindDragEvent(obj){ obj.onmousedown = function(e){ e = e || wi ...

  3. js原生选择class DOM元素

    document.querySelector(".demo"); querySelector() 方法返回匹配指定选择器的第一个元素.如果需要返回所有的元素,使用 querySel ...

  4. JS/jQuery点击某元素之外触发事件

    JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...

  5. JS基础内容小结（event 鼠标键盘事件）（三）

    var ev=ev||event 兼容性处理 得到焦点为 onfocus 失去焦点 onblur return false能阻止部分函数的执行 obj.select 选择指定元素里的文本内容 ———— ...

  6. JS原生对象实现异步请求以及JQ的ajax请求四种方式

    一.JS原生方式异步请求 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="A ...

  7. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  8. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  9. JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

随机推荐

  1. 如何将数据库中存的树转化为树形列表(以easyui的tree为例)

    很多时候,我们会把一棵树存放到数据库中,当前台需要展示一个树形列表时,将这棵树读取出来并显示,这个过程是怎么实现的呢? 这篇文章是以构造一棵easyui前台框架的一个树形列表为例,后台框架是sprin ...

  2. backend_queue.go

    package nsqd // BackendQueue represents the behavior for the secondary message // storage system typ ...

  3. 学习ASP.NET Core Razor 编程系列十——添加新字段

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  4. 【NOI赛前训练】——专项测试1·网络流

    T1: 题目大意: 传送门 给一个长度为$n(n<=200)$的数列$h$,再给$m$个可以无限使用的操作,第$i$个操作为给长度为花费$c_i$的价值给长度为$l_i$的数列子序列+1或-1, ...

  5. 【小白学C#】浅谈.NET中的IL代码

    一.前言 前几天群里有位水友提问:”C#中,当一个方法所传入的参数是一个静态字段的时候,程序是直接到静态字段拿数据还是从复制的函数栈中拿数据“.其实很明显,这和方法参数的传递方式有关,如果是引用传递的 ...

  6. java中的单例模式与静态类

    单例模式与静态类(一个类,所有方法为静态方法)是另一个非常有趣的问题,在<Java中有关单例模式的面试问题>博文中露掉了,由于单例模式和静态类都具有良好的访问性,它们之间有许多相似之处,例 ...

  7. Windows上安装配置SSH教程（4）——WinSCP+OpenSSH 使用公钥自动登陆

    -------------------- 知识点汇总:http://www.cnblogs.com/feipeng8848/p/8559803.html -------------------- 重要 ...

  8. 【.NET异步编程系列3】取消异步操作

    在.Net和C#中运行异步代码相当简单,因为我们有时候需要取消正在进行的异步操作,通过本文,可以掌握 通过CancellationToken取消任务(包括non-cancellable任务).  早期 ...

  9. python接口自动化（八）--发送post请求的接口（详解）

    简介 上篇介绍完发送get请求的接口,大家必然联想到发送post请求的接口也不会太难,被聪明的你又猜到了.答案是对的,虽然发送post请求的参考例子很简单,但是实际遇到的情况却是很复杂的,因为所有系统 ...

  10. 安全性测试入门：DVWA系列研究（二）：Command Injection命令行注入攻击和防御

    本篇继续对于安全性测试话题,结合DVWA进行研习. Command Injection:命令注入攻击. 1. Command Injection命令注入 命令注入是通过在应用中执行宿主操作系统的命令, ...