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

Posted yaogengzhu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每日分享！～ 使用js原生方式对拖拉元素（鼠标的事件）相关的知识，希望对你有一定的参考价值。

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

效果如下：

技术图片

 

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

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

　　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原生方式对拖拉元素（鼠标的事件）的主要内容，如果未能解决你的问题，请参考以下文章

每日分享！JavaScript的鼠标事件（11个事件）

每日分享

原生js实现拖拽功能

js每日一练京东无延迟菜单

用原生JS写关于鼠标移入移出ul的二级菜单问题，怎么都实现不了效果

js实现一个砖头在页面拖拉效果