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

效果如下：

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

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

　　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. Cookie防篡改机制

    一.为什么Cookie需要防篡改 为什么要做Cookie防篡改,一个重要原因是 Cookie中存储有判断当前登陆用户会话信息(Session)的会话票据-SessionID和一些用户信息. 当发起一个 ...

  2. MongoDB与python交互

    1.Pymongo PyMongo是Mongodb的Python接口开发包,是使用python和Mongodb的推荐方式.官方文档 2.安装 进入虚拟环境 sudo pip install pymon ...

  3. 高性能Server---Reactor模型【转载】

    原文链接:http://www.ivaneye.com/2016/07/23/iomodel.html 无处不在的C/S架构 在这个充斥着云的时代,我们使用的软件可以说99%都是C/S架构的! 你发邮 ...

  4. attr和prop的区别以及在企业开发中应该如何抉择

    attr和prop有很多相同的地方,比如都可以操作标签的属性节点,而且获取的时候都只可以获取到相同节点的第一个,例如这样: $('span').attr('class');和$('span').pro ...

  5. django(权限、认证)系统——User模型

    在Django的世界中,在权限管理中有内置的Authentication系统.用来管理帐户,组,和许可.还有基于cookie的用户session.这篇blog主要用来探讨这套内置的Authentica ...

  6. 【bzoj 2303】【Apio2011】方格染色

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=2303 题解: 很神奇的思路,膜一发大佬http://www.cnblogs.com/HHsh ...

  7. BZOJ_3048_[Usaco2013 Jan]Cow Lineup _双指针

    BZOJ_3048_[Usaco2013 Jan]Cow Lineup _双指针 Description Farmer John's N cows (1 <= N <= 100,000) ...

  8. BZOJ_4554_[Tjoi2016&Heoi2016]游戏_二分图匹配

    BZOJ_4554_[Tjoi2016&Heoi2016]游戏_二分图匹配 Description 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若 ...

  9. POJ_3342_Party at Hali-Bula_树形DP

    POJ_3342_Party at Hali-Bula_树形DP 题意:直接上司和本人不能同时参加,求最多参加人数,并回答是否唯一解. 分析:常规树形DP,需要再维护一下选/不选当前点取得最大值时是否 ...

  10. 旅行app(游记、攻略、私人定制) | 顺便游旅行H5移动端实例

    <顺便游旅行>是一款H5移动端旅行app,提供目的地(国内.国外.周边)搜索.旅游攻略查询.游记分享.私人定制4大模块,类似携程.同程.去哪儿.马蜂窝移动端,只不过顺便游app界面更为简洁 ...