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

效果如下：

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

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

　　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. 对于bootstrap可视化布局设计可以参考2017.6.2

    http://www.layoutit.cn/v3/index.html  可视化布局链接,拖好控件自动生成代码非常方便 http://www.jq22.com/jquery-info14044  这 ...

  2. python实现简体中文和繁体相互转换

    1. opencc-python 如果目录上的链接被屏蔽了,请手动复制 https://pypi.python.org/pypi/opencc-python/ 首先介绍opencc的python实现库 ...

  3. GitHub 系列之「Git速成」

    1.什么是Git? Git 是 Linux 发明者 Linus 开发的一款新时代的版本控制系统,那什么是版本控制系统呢?怎么理解?网上一大堆详细的介绍,但是大多枯燥乏味,对于新手也很难理解,这里我只举 ...

  4. Go 1.9 sync.Map揭秘

    Go 1.9 sync.Map揭秘 目录 [−] 有并发问题的map Go 1.9之前的解决方案 sync.Map Load Store Delete Range sync.Map的性能 其它 在Go ...

  5. BZOJ_1085_[SCOI2005]骑士精神_IDDFS

    BZOJ_1085_[SCOI2005]骑士精神_DFS Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑 士的走法(它可 ...

  6. CentOS DesktopEntry

    IBM Developer  :  https://www.ibm.com/developerworks/cn/linux/l-cn-dtef/index.html [Desktop Entry] N ...

  7. 【转】超酷的 mip-infinitescroll 无限滚动（无限下拉）

    写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站.对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长.技术上原理也很简单,在页面加载时加载一 ...

  8. safari 浏览器 input textarea select 等不能响应用户输入

    解决办法 -webkit-user-select:auto; /*webkit浏览器*/ user-select:auto; -o-user-select:auto; -ms-user-select: ...

  9. Python：基于MD5的文件监听程序

    前述 写了一个基于MD5算法的文件监听程序,通过不同的文件能够生成不同的哈希函数,来实现实现判断文件夹中的文件的增加.修改.删除和过滤含有特定字符的文件名的文件. 需求说明 需要实现对一个文件夹下的文 ...

  10. .Net Core中利用TPL（任务并行库）构建Pipeline处理Dataflow

    在学习的过程中,看一些一线的技术文档很吃力,而且考虑到国内那些技术牛人英语都不差的,要向他们看齐,所以每天下班都在疯狂地背单词,博客有些日子没有更新了,见谅见谅 什么是TPL? Task Parall ...