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

效果如下：

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

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

　　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. 读书笔记---HTML5实战 MARCO CASARIO（后六章）

    画布叠加:用CSS的z-index和position; 第八章 HTML5通信API ①XMLHTTPREQUEST是JS中用于服务器交互的API; ②用HTML5的POSTMESSAGE API实现 ...

  2. spring的依赖注入是什么意思

    最近学习spring框架,对依赖注入有些模糊,遂上网翻阅资料,做了下列总结,原博客为CSDN 南夏的 spring的依赖注入是什么意思,侵删! Spring 能有效地组织J2EE应用各层的对象.不管是 ...

  3. JAVA API操作hbase1.4.2

    package com.quyf; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.Path; imp ...

  4. Linux下全局安装composer

    下载composer curl -sS https://getcomposer.org/installer | php 将composer.phar文件移动到bin目录以便全局使用composer命令 ...

  5. github上传文件的几句命令行

    1.首先进入要上传的本地目录,右键打开git命令行. 2.执行指令:git init    初始化本地仓库,这是会看到多了一个.git文件夹(如果没看到那就是电脑隐藏了). 3.执行命令:git ad ...

  6. Postman----支持markdown可自动生成接口文档

    1.postman支持markdown作为集合中的请求,对集合和文件夹进行文字描述的方式,您可以嵌入屏幕截图和其他图像已获得更多描述性的介绍. 2.已markdown语法为准,填写自己想要展示的内容 ...

  7. html中layui+jfinal模板实现前端搜索功能

    <input type="text" id="campus" class="layui-input" onkeyup="ck ...

  8. DCGAN 代码简单解读

    之前在DCGAN文章简单解读里说明了DCGAN的原理.本次来实现一个DCGAN,并在数据集上实际测试它的效果.本次的代码来自github开源代码DCGAN-tensorflow,感谢carpedm20 ...

  9. ajax 和jsonp 不是一码事

    由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...

  10. 教你如何使用Java手写一个基于数组实现的队列

    一.概述 队列,又称为伫列(queue),是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在后端(称为rear)进行插入操作,在 ...