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

效果如下：

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

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

　　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. Android 框架练成 教你打造高效的图片加载框架

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41874561,本文出自:[张鸿洋的博客] 1.概述 优秀的图片加载框架不要太多, ...

  2. VM10虚拟机安装图解

    支持32位windows操作系统和64位操作系统的VM10虚拟机 ============= 下载虚拟机: VM10虚拟机下载网址+Vm10的激活秘钥  https://jingyan.baidu.c ...

  3. 运行yum时出现/var/run/yum.pid已被锁定,PID为xxxx的另一个程序正在运行的问题解决

    出现问题 [root@localhost ~]#yum update 已加载插件: fastestmirror,security /var/run/yum.pid已被锁定,PID为1610的另一个程序 ...

  4. Python中的r+和a+

    问题描述 我打算更改文件user_list2中的内容, 本来的想法是加一个temp 文件. 先把user_list2的内容读取并修改后写入temp, 之后再写回来. 但是在读取内容并修改后写入temp ...

  5. bzoj4035 [HAOI2015]数组游戏

    这题显然把每个白格子看成一个子游戏 一个白格子$x$的$sg$值是$mex{[0,sg[2x],sg[2x] XOR sg[3x].....]}$ 打表发现一个数的$sg$值只和$n/x$有关,然后分 ...

  6. BZOJ_4198_[Noi2015]荷马史诗_huffman实现

    BZOJ_4198_[Noi2015]荷马史诗_huffman实现 题意: Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的<荷马史诗> ...

  7. BZOJ_3427_Poi2013 Bytecomputer_DP

    BZOJ_3427_Poi2013 Bytecomputer_DP Description 给定一个{-1,0,1}组成的序列,你可以进行x[i]=x[i]+x[i-1]这样的操作,求最少操作次数使其 ...

  8. SQL Server 中如何做到连续时间段的拆分？

    今天在工作中遇到了一个很实际的问题,客户在OA接口的员工休假中间表中提供了连续时间段的休假记录,例如: 张三,2018-12-1 ~2018-12-31 ,病假,31天.这样带来的问题是,如果我需要统 ...

  9. 三元运算符 与 return

    有三元运算符可以很好的代替if else简单语句 但是在使用的时候发现 与 return使用的时候 需要用这种形式 错误形式: $a ? return 1 ? return 0; 正确形式: retu ...

  10. 残差网络（Residual Networks, ResNets）

    1. 什么是残差(residual)? “残差在数理统计中是指实际观察值与估计值(拟合值)之间的差.”“如果回归模型正确的话, 我们可以将残差看作误差的观测值.” 更准确地,假设我们想要找一个 $x$ ...